StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS external font: what's the right syntax?
text
Body
copied!<p>All the documentation I've searched says that the right syntax to load external font files in CSS is the following:</p> <pre><code>@font-face { font-family: 'JosefinSansLight'; src: url('josefinsans-light-webfont.eot'); src: url('josefinsans-light-webfont.eot?#iefix') format('embedded-opentype'), url('josefinsans-light-webfont.woff') format('woff'), url('josefinsans-light-webfont.ttf') format('truetype'), url('josefinsans-light-webfont.svg#JosefinSansLight') format('svg'); font-weight: normal; font-style: normal; } </code></pre> <p>(Provided one has the font in all the above formats, of course, which I do).</p> <p>However, the above syntax doesn't work for me in Safari 5.0.2 or Firefox 9: the font simply doesn't load. On the other hand, when I try just this:</p> <pre><code>@font-face { font-family: 'Josefin Sans'; src: url('JosefinSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } </code></pre> <p>The font does get loaded and displayed. (I don't have IE available to test).</p> <p>What's wrong? I should mention that I originally had only the TTF file (the one I'm loading in the second example), and that I generated the other versions (the ones that don't load) using Fontsquirrel.</p> <p><strong>Edit:</strong> checking my Apache logs, I see that the browser is definitely pulling the fonts (therefore, they are in the right location). Firefox just loads the TTF font in the second case (as one would expect), while in the first case it only loads the EOT font (the first one in the code), not the others. OTOH, Safari loads the TTF, but doesn't seem to load anything in the first case. I don't see any 404 errors related to fonts in the logs either.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload