3

I have a CSS file in the Static Resources and in that I have styles for specific fonts. These fonts are also in the Static Resources.

If I paste the URL for the font files (ie. font.ttf) into the browser, I get a prompt to download the file. But when I browse to the page containing the CSS and reference to the font files. I get a 404 for the fonts???

Improve this question

1 Answer 1

Reset to default
4

You don't provide a lot of detail so its not clear, but it is possible the problem you are seeing is identical to or similar to this...

Font references in CSS such as Bootstrap are usually relative like this:

src:url(../fonts/glyphicons-halflings-regular.eot)

The simplest way to require no changes when using such CSS in Salesforce (and get the fonts to work) is to have one static resource ZIP containing both the CSS and the fonts with this internal folder structure:

bootstrap
    bootstrap.min.css
    bootstrap.min.js
fonts
    glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff

The CSS can then be referenced in your page using e.g.:

<link href="{!URLFor($Resource.BootstrapZip, 'bootstrap/bootstrap.min.css')}"
        rel="stylesheet" />

which is delivered to the browser as e.g.:

<link href="/resource/1416590327000/BootstrapZip/bootstrap/bootstrap.min.css"
        rel="stylesheet" />

so that the relative reference to the font resolves to the valid URL of:

/resource/1416590327000/BootstrapZip/fonts/glyphicons-halflings-regular.eot

If the CSS and fonts are in separate static resources, then at best you will have to modify the CSS to use the font static resource name, and at worst you might even end up including the resource version timestamp.

Improve this answer

You must log in to answer this question.

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