@font-face gotchas – Paul Irish

May 5th, 2010 by @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)
• TrueType format renders with a better quality than Opentype CFF. (sez Typekit) (fontsquirrel default )
• In IE6-8, using createStyleSheet and then setting styleElem.styleSheet.cssText to a text value that includes a @font-face declaration going into will crash IE6-8. (src)
• font-size-adjust (only supported in Firefox) normalizes x-height and may improve the FOUT .
• text-transform doesn’t play well with @font-face in current implementations. (via snook & Gary Jones)
• @font-face doesnt play nice with css transitions. (via ethan marcotte )
• IE6 under High Security settings will pop a security dialog when a site tries to use @font-face. (via Wouter Bos)
• There have been reports that when a font is segmented into multiple files , a css text-shadow can overlap in a weird way. (pics plz? 🙂
• Aaron James Young dug into @font-face on obscure linux-only browsers .
• 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)
  • Letter-spacing css doesnt appear to work with SVG fonts.
• 

  IIS Needs some custom mimetype configuration for serving webfonts. To enable, go to: Default Web Site > Properties > HTTP Headers > File Types > New Type…

  • .otf : font/otf
  • .svg : image/svg+xml

  (thx ProtectedVoid & Tom Nelson) — Test page

• “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.