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
kleinaItalienerkleinaItaliener 

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

 

Cheers

 

 

osamanosaman

Include the css on the visualforce using 

 

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

 

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

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.
SquareTradeSquareTrade

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?
SquareTradeSquareTrade

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:

http://www.fontsquirrel.com/fontface/generator

 

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

http://www.w3.org/TR/css3-fonts/#font-family-desc
Gabriel Kremer 27Gabriel Kremer 27
As this is a topic where struggling is part of the process I want to share my experience.

Goal:
VF page with own stylesheet, a few images and custom font. Uploading everything in one .zip  static resource.
Problem:
{!URLFOR($Resource.StaticResourceName, 'filepath'} did not resolve correctly.
Solution:
Opened Development Tools and checked for the URL used to load the font. And it already was referencing the .zip static resource.
So just think about how to build the URL as you would do outside of the visualforce page.
Exmaple:
.zip structure of static resource (in my case):
src
|_ css
   |_main.css
|_img
   |_some1.png
   |_some2.png
|_fonts
   |_RobotoRegular.woff2
   |_RobotoBold.woff2

Load stylesheet main.css in visualforce page 
<apex:stylesheet value="{!URLFOR($Resource.ContactForm, 'src/css/main.css')}"/>
Use font RobotoRegular.woff2 
@font-face{ font-family: 'Roboto'; src: url('../fonts/RobotoRegular.woff2'); font-style: normal; font-weight: normal; }
Explanation: Go one level up from the main.css file with .. navigate to the fonts and then reference the .woff2 file: ../fonts/RobotoRegular.woff2
 
I hope this will help someone in the future to avoid wasting a few hours and crawling all the existing posts just for getting frustrated. :D
Aaron MosseyAaron Mossey
Hi Gabriel,

Would you be able to provide your full markup that achieves custom font referencing?  I've been trying for 2 days to get custom font onto my VF page with repeated fustrating failure.