How can I get better at using @Font Face
April 11, 2011 3:54 PM   Subscribe

Question about the best way to set up @font-face for custom fonts.

It always seems to take me forever to find out why the @font-face CSS trick isn't working right to make custom typefaces appear (under Wordpress.) I always stumble into the solution by blindly messing with the filenames and font locations.

Is there a better way to troubleshoot what could be going wrong when the font is stuck in Times New Roman and won't change? For example, whether the CSS is looking in the right place?
posted by Victorvacendak to Computers & Internet (5 answers total) 3 users marked this as a favorite
 
Best answer: If you use the FireBug extension to firefox, you can turn on the "Net" panel; this will show you exactly what resources the browser is asking for, and whether the server can deliver it. If it can't, it'll show up as a 404 error, and you can usually figure out the path.

FWIW, I believe the URL to the font should be relative to the CSS file invoking it, just as it is in any other binary object loaded by a stylesheet.
posted by jenkinsEar at 3:59 PM on April 11, 2011 [1 favorite]


Response by poster: Holy cow, I already loved Firebug but didn't realize it did this, thanks. I think the files are in the same dir as the CSS, same as the relative path to my images, but can't figure out why the font change doesn't kick in.
posted by Victorvacendak at 4:04 PM on April 11, 2011


If you want to check the filename, just paste it into the URL bar ('http://www.example.com/fontname.ttf' for example) - if it gives you a panel to download the font file, then you're pointing to the right place, but if it gives you a 404, then you're not.
posted by ella wren at 4:04 PM on April 11, 2011


If the URL is correct but the font still isn't working, you may want to check for a bad transfer (fonts are binary files; if you accidentally FTP them as ascii, they break). I'm not sure how browsers indicate a corrupt / unusable font file.
posted by jenkinsEar at 4:08 PM on April 11, 2011


Response by poster: Thanks, everyone. Fixed it. For future people suffering with this issue, looks like an !important can go a long way.
posted by Victorvacendak at 4:12 PM on April 11, 2011


« Older stand back, he bites   |   I left something on an SF bus- is there anyone I... Newer »
This thread is closed to new comments.