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?
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?
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
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
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
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
posted by Victorvacendak at 4:12 PM on April 11, 2011
This thread is closed to new comments.
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]