+ Start a Discussion

Implement Custom Font | CSS | Static Resource (Fonts.zip)

Good evening everybody,


i have a problem with my Visual Force Page.


I will use an CSS File and Custom FONTS which is included via "Static Resource". 

All Fonts are also included as a Static Resource.


But how i can implement my custom fonts on a Visual Force Page?


Txs. for any information






Include the css on the visualforce using 


<apex:stylesheet value="{!$Resource.YourStyleSheet}"/>


and use the css class names the way you normally use.


First you need to include these style sheets in your page and then use them in page.
For including css, syntax is:

<apex:stylesheet value="{!URLFOR($Resource.StyleZip, 'basic.css')}"/>

Now you can use classes defined in basic.css file in ypor page.


hi all, 


We want ot embed a custom font, which we understand needs to be included in the /staticpkg/staticresources/ directory.


We have several font types for this font-face in order to handle cross browser font compatibility.


Should each of these fonts be added to the repository in the same way as an image, as a "resource" file with an associated "xml" for each font type?


Thank you to everyone for your help.


We were not able to successfully have the font hosted on the Salesforce servers.


Our solution was to include the custom font using @font-face in the CSS file, but hosting the fonts on our own servers.


In this way, all the paths for the various font types for cross-browser compatibility referred back to our home servers.


We used an online font conversion site to create the cross-browser CSS code:



More info on cross browser CSS custom fonts can be found here: