Wondering why this is not working for my Visualforce Page as I would prefer to have my CSS in a separate file within the zip folder in Static Resources... when I added the CSS directly to the VF page using style tags, it works - so I assume there is something wrong with my reference code below...

One thing to mention is that some of my other references using the same syntax is properly referencing other files within the zip folder.

<link rel="stylesheet" id="fonts-css" href="{!URLFOR($Resource.DonationPage,'salesforce-template/fonts.css')}" type="text/css" media="all"/>

fonts.css CSS file contains...

@font-face {
    font-family: 'Euclid Semibold';
    src: url({!URLFOR($Resource.DonationPage,'salesforce-template/fonts/EuclidCircularA-Semibold-WebS.eot')});
    src: url({!URLFOR($Resource.DonationPage,'salesforce-template/fonts/EuclidCircularA-Semibold-WebS.eot?#iefix')}) format('embedded-opentype'),
         url({!URLFOR($Resource.DonationPage,'salesforce-template/fonts/EuclidCircularA-Semibold-WebS.woff')}) format('woff'),
         url({!URLFOR($Resource.DonationPage,'salesforce-template/fonts/EuclidCircularA-Semibold-WebS.ttf')}) format('truetype'),
         url({!URLFOR($Resource.DonationPage,'salesforce-template/fonts/EuclidCircularA-Semibold-WebS.svg#open_sansbold')}) format('svg');
    font-weight: 600;
    font-style: normal;

.makewaybold {font-family: 'Euclid Semibold' !important;}

1 Answer 1


Right now you are using merge fields. The Visualforce preprocessor is not filling them in if the CSS is moved to an external stylesheet because the preprocessor won't look at any external files. If it's within the Visualforce page the parser picks it up like any other mark up.

It's perfectly fine to reference the font files as you would normally within the CSS file, no Visualforce functions needed.

Assuming your directory structure looks something like this:


Then you can reference the font files using relative paths because they're all in the same static resource:

@font-face {
    font-family: 'Euclid Semibold';
    src: url('./fonts/EuclidCircularA-Semibold-WebS.eot');
    src: url('./fonts/EuclidCircularA-Semibold-WebS.eot?#iefix') format('embedded-opentype'),
         url('./fonts/EuclidCircularA-Semibold-WebS.woff') format('woff'),
         url('./fonts/EuclidCircularA-Semibold-WebS.ttf') format('truetype'),
         url('./fonts/EuclidCircularA-Semibold-WebS.svg#open_sansbold')}) format('svg');
    font-weight: 600;
    font-style: normal;

.makewaybold {
    font-family: 'Euclid Semibold' !important;
  • That worked. Thanks so much! Commented May 27, 2020 at 19:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .