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 forfont-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 |
|
- 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 settingstyleElem.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
- .otf :
- “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.