@font-face gotchas – Paul Irish

Over the past few months, I’ve collected a few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff…

in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face’d text will not succeed. Same applies for font-style:italic. You can fix by adding the following to your @font-face declaration: (via doctype, crbug/31883 , crbug/35739 , webk.it/34147 )

1
2
3
4

font-weight:normal;
font-style:normal;
font-variant:normal;
/* these values are defaults in FF/Opera/IE but not webkit */

FF/Linux cannot serve webfonts from the file:// protocol. (Also, a tome on type quality with linux from Evan Martin)

If a @font-face declaration is within a media query@media screen { ..., it will fail in Firefox. (Thx Ben Kulbertis) http://bugzil.la/567573

Hosting the fonts on a different domain?Firefox requires some extra effort; you’ll need to add the Access-Control-Allow-Origin header, whitelisting the domain you’re pulling the asset from.Example .htaccess config here. Alternatively, you can use the base64 encoding in CSS (create it with the fontsquirrel generator ) to avoid setting headers.details here

If you’re using @font-face will fillText() with <canvas>, then you might notice fillText NEEDS the font resource to load completely before you use it. And that’s up to you to manage.crbug.com/32879

SVG Fonts – Currently SVG is the only way to get webfonts working on iPhone and iPad. It is the most rudimentary format for fonts on the web.

SVG Fonts lack kerning and other complementary information

SVGz is a format that bakes compression right in and will save you bandwidth overhead. But you’ll need to add this to to your .htaccess for this benefit.AddType image/svg+xml svg svgz AddEncoding gzip svgz(via @fontsquirrel )

SVG fonts don’t work with a cache manifest. Due to the manifest treating # as comments and Mobile Safari requiring the font ID reference in the URL. [Unverified] (via Tristan Dunn)

Using text-overflow: ellipsis; turned the contents into only “…” and nothing else.(via Tristan Dunn)

“Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold face” from the w3c fonts spec. What this means is, if you have a font you apply to your whole site, but it encounters elements that are set to font-weight: bold;, say.. <h2>’s or <strong>.. the browser will fake a bold and it might not look so hot.