Want to save a few minutes while fixing the problems with the @font-face property in Internet Explorer 9 and Firefox? I recently stumbled upon an annoying browser bug having to do with the CSS @font-face property, and I have a couple quick solutions for anyone who wants to avoid banging their head against the wall trying to sort out similar issues.
This guide addresses font-face issues I had with Firefox and IE even AFTER I had confirmed that I had the correct CSS syntax and formatting for the @font-face property, and that I had the following filetypes for EACH font I was trying to use with the @font-face property: .TTF, .EOF, .WOFF and .SVG (for old iOS browsers). The issues also only seemed to affect sites with SSL Certificates installed.
The CSS @font-face property is awesome because it lets you download custom fonts and typefaces, and upload them to your website’s server in order to use them as “Webfonts” to display the text on your webpages.
Google Chrome, as usual, is excellent with their support of this feature, but Mozilla Firefox and Internet Explorer were choking up when trying to display certain fonts. The particular font that I noticed issues with was Droid Serif (along with Droid Serif Italic, Droid Serif Bold and Droid Serif Bold Italic). I made several attempts to fix the problem, but with no luck. On top of that, the issue did not occur until an SSL Certificate was installed to the server and the website was being served up via HTTPS. Scroll down to see the quick and easy solutions:
FIX: FONT-FACE ISSUES IN FIREFOX
Firefox seemed to be having trouble securely loading the resource thanks to an Apache setting. Simply add the following lines to your .htaccess file.
Even after this permission fix, I noticed problems loading fonts in Internet Explorer 9. I ended up having to edit the CSS Stylesheet.
FIX: FONT-FACE ISSUES IN INTERNET EXPLORER
Edit your CSS Stylesheet. Find all references of “fonts/mywebfont.ttf” and change them to something like “http://www.mywebsite.com/fonts/mywebfont.ttf”.
Basically including a full path to the font on your website, including the website address itself, was the only way I was able to get Internet Explorer to serve up these webfonts via the @font-face property. Implementing the above two solutions will surely iron out any complicated or confusing @font-face issues you may be experiencing.
For questions, comments or suggestions, please email info@missionbaymedia.com.
