0

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

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:

static-resource
└─salesforce-template
  └─fonts.css
  └─fonts
    └─EuclidCircularA-Semibold-WebS.eot

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;
}
1
  • That worked. Thanks so much! May 27, 2020 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.