Recap
Back in May last year,
Jon wrote about Web fonts and demoed the then beta Web Font service from Monoytype's Fonts.com. At that time, Web Fonts services were popping up all over the place and gaining ground in the web community. Since then, we've been keeping a keen eye on how the technology has been progressing.
Moving on
Towards the end of last year, our own site had a refresh and ever keen to implement new technologies, we ditched sIFR in favour of Web Fonts using the hosted service Typekit. During our site's transition, the support for Internet Explorer was pretty patchy and when Typekit first came out, it served just one font per family to IE. That meant no italics, no bold, just the regular (book) font. When bold or italics were needed, IE synthesised them by thickening or slanting the glyphs of the family's normal font. The whole point of using Web Fonts is so type on the web will look pretty and the difference between the actual and synthetic versions can be significant. Depending on the font, this difference ranges from being barely noticeable to outright yucky. To get an idea of how IE synthesises fonts, the image below shows two typefaces' italic and bold fonts (yellow) next to their bold and italic synthesised versions (in white). Arial at the top is passable, but Georgia below...?
Today
Typekit now serves more font weights and styles to Internet Explorer, but in some circumstances, unless you tell it not to, IE will still synthesise bold styles.
Typekit have a handy matrix to explain exactly which circumstances. Looks complicated. And it is. But their own testing has shown that they can now serve IE up to four fonts per family. What that means for us is it's possible to use two different weights from each family and be confident we can render them in italic as well.
There are other limitations, for example if many fonts are enabled, the load time and 'jump' can be just as noticeable as sIFR and like sIFR,the technology utilises javascript. Also, although support for the iPad has been rolled out by Typekit, it's an experimental feature because of the quirks in Mobile Safari’s support for @font-face. for this reason, we haven't enabled it on our site - in tests it crashed Safari!
Web Fonts working version
The copy in the first square below is an image and the second is live text. If you're browsing in the latest versions of Firefox, Chrome or Safari, both should look almost identical. If you're browsing in Internet Explorer, they may look a little different depending on your version and you will notice that the type is rendering in only one or two weights.
The Way forward
Despite the limitations, Web Fonts are great news for web designers and hosted options like Typekit are always updating and improving their services and adding extra support. Unlike traditional image replacement techniques, Web Font technology means the type is readable by screen readers without needing alt text and can be controlled by CSS styling and scaled without pixellation. Unlike sIFR, Web Font technology does not rely on Flash support which is great in terms of accessibility. It's also far easier to implement and maintain and since the fonts are fully licensed for web use by the type foundries, there's no worrying over the fuzzy legal boundaries encountered with technologies such as Cufón. While support for IE and the iPad, is a work in progress, Web Fonts are definitely an improvement on existing workarounds and I'm looking forward to using them in future projects!