function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SquareTradeSquareTrade 

Is this the correct way to embed custom fonts

We want to use a custom font for our Support page nav bar button text - Trade Gothic.

 

Here is how we intend to implement. Is this correct before we expend resources to implement.

 

 

1. load the font files in the /staticpkg/staticresources/ folder.

 

2. load a separate .resource file with a corresponding .xml for each font file type, and code the files in the same manner as images are loaded in this folder

 

3. Edit the  CSS file that is included in our "knowledgeLayout.page" file to include the font embed CSS and point the path for each font file to the static resource folder where they live, as follows:

 

@font-face {
    font-family: 'TradeGothic';
    src: url('/support/resource/1294100226000/tradegot-webfont.eot');
    src: url('/support/resource/1294100226000/tradegot-webfont.eot?#iefix') format('embedded-opentype'),
         url('/support/resource/1294100226000/tradegot-webfont.woff') format('woff'),
         url('/support/resource/1294100226000/tradegot-webfont.ttf') format('truetype'),
         url('/support/resource/1294100226000/tradegot-webfont.svg#TradeGothicMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TradeGothic';
    src: url('/support/resource/1294100226000/tradegotboltwo-webfont.eot');
    src: url('/support/resource/1294100226000/tradegotboltwo-webfont.eot?#iefix') format('embedded-opentype'),
         url('/support/resource/1294100226000/tradegotboltwo-webfont.woff') format('woff'),
         url('/support/resource/1294100226000/tradegotboltwo-webfont.ttf') format('truetype'),
         url('/support/resource/1294100226000/tradegotboltwo-webfont.svg#TradeGothicBoldTwo') format('svg');
    font-weight: bold;
    font-style: normal;

}

 

4. add the "TradeGothic" attribute to ous nav button text CSS.

 

Done.

SquareTradeSquareTrade

Another part of the equation is what file type should be used for the fonts in the staticresources directory?

 

If images are includes as this type of pkb files, for example:

pkb_image_backer_search.resource
pkb_image_backer_search.resource-meta.xml

 

Then how could the font pkb file type for font "tradegotboltwo-webfont.eot" be named?

 

pkb_font_tradegotboltwo_webfont.resource
pkb_font_tradegotboltwo_webfont.resource-meta.xml

 

and then in the meta xml file the "contentType" needs to be defined.

 

maybe "font/eot"?

 

and how to use this system for the multiple file types for the font

 

 

 


Force2b_MikeForce2b_Mike

Were you ever to get this working? I've been trying to get a custom font to be used in my VF page, but it's just not working - even with the font files hosted on another server.

 

Best Regards,

 

Mike