Occasionally we are asked to help troubleshoot odd issues with CSS and @font-face. Here are a few bugs we’ve uncovered:
1. In Chrome, a text shadow like this: text-shadow: 0 1px -1px #719BC3; will either cause serious rendering issues or cause the font to fail completely.
2. When light text is applied over a dark background, the font becomes more bold in Mac rendering. You may find this an interesting read: www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing
3. In IE7, having a space between the font-size and line-height in your CSS causes the font to fail to render. Example: font: 16px / 1.2em ‘web_font’, Arial, sans-serif;
4. Webkit (Safari and Chrome) - fonts render very poorly. Cause: any text with @font-face applied will be rendered without anti-aliasing if there is a text element without anti-aliasing applied preceding it. Usually those are fonts smaller than 5px or monospaced fonts at small sizes which are rendered without anti-aliasing. Read more here.
5. Firefox - fonts will not load in Firefox. This is not really a bug but we run into it every now and then. Firefox allows you to turn off web-fonts. You can change this setting here: Preferences>Content>Advanced - there is a check box that says “Allow pages to choose their own fonts, instead of my selections above.
6. IOS handheld devices will show a shadowed version, or double printed versions of a font when a faux-bold is applied by the browser.
Updated on October 4, 2017