Question

Did a static version of site using FontSquirrel-generated CSS code. CSS stylesheet in “css” folder, fonts in “fonts” folder. CSS sample chunk showing @font-face relative paths:

@font-face {
    font-family: 'TitilliumText22LRegular';
    src: url('../fonts/TitilliumText22L003-webfont.eot');
    src: url('../fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L003-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L003-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Everything works fine with a call to

font-family: 'TitilliumText22LRegular', Verdana, sans-serif;

Now it’s WordPress template time. WP uses a template root stylesheet (“style.css”). So logically, if I store the fonts in a “fonts” folder and just get rid of the “../” path backup, I should be OK, since the WP stylesheet is at root, and everything in it should be referenced to its own location:

    src: url('fonts/TitilliumText22L003-webfont.eot');

But this does not work. Fallback font-families and other font style rules work fine. The WP stylesheet has no problems with the analogous CSS path structure referencing images in an “img” folder below the template root. Strangely, if I move the font files themselves up to the template root and reference them in the stylesheet directly like so:

    src: url('TitilliumText22L003-webfont.eot');

everything works fine. Naturally though I don’t want to dump 40+ font files in the template root. Possibly WP requires some separate PHP file/rule using URL path trickery for this, say blog_info(‘template_url’) or similar. But I hope I’m missing something obvious instead!

thanks for any ideas

Answer 1

Add separate font-face folder containing the fonts and the font-face css (named fonts.css for my example) at the theme directory (same level as style.css)

Ditch all prefixes to the font names too (no ../ or /).

In your header.php file you want to add:

<link rel="stylesheet" type="text/css" href="<?php echo bloginfo( 'stylesheet_directory' ); ?>/font-face/fonts.css" />

Works for my theme at any rate.