There have been written many articles about the improved font technologies – like @font-face – for the web. Most of them are very positive, but in this article I want to show you a few shadow sides of real fonts for websites. Don’t get me wrong, I actually love the new possibilities for webdesign (I’m actually using a few Typekit fonts for this blog), but you should be aware of the challenges that come with it. This article focuses on Typekit – one of the most popular subscription-based services for Open Type fonts – and will most likely apply to other font services as well as the issues are inherent to the used approach.
1. Fonts are not rendered nicely in all browser
This was the first issue I ran into when testing Typekit fonts. Especially Internet Explorer is not very good in rendering the external fonts, which leads the rough edges and quirky results. Below is an example of the same text and font, rendered in Firefox (on Mac) and Internet Explorer 8 (on Windows 7). In this case I picked a font that’s still acceptable in both browsers, there are examples which render perfect in Firefox, but are unreadable in IE.
To mitigate this issue, a (web)designer should be careful when selecting a font for his new design. For almost any font, Typekit shows you previews of how the font will look in different browsers. This is a great idea and a big help when selecting the right font for your site.
2. Support for iPad/iPhone is experimental
Although you’d expect the Mobile Safari browsers on iPhone and iPad to be compatible to the Mac OSX versions, this is definitely not the case. When designing a website, I run into issues a lot. Apparently, the fonts that are delivered to iDevices, should be in SVG format (not OpenType or WOFF).
This requires special conversions and Typekit is doing them for you, but I tested it for a few of my sites and it’s not stable. Almost half of the time, Mobile Safari crashes when loading and/or displaying the fonts. Keep this in mind when selecting the fonts and make sure you have a good fallback. Typekit allows you to turn the (experimental) iPad and iPhone support off.
3. Flashes Of Unstyled Text (FOUT)
Because fonts are loaded after displaying the webpage (apparently only in Firefox and Opera), this leads to a short period in which the fallback-websafe-fonts are displayed. Visitors experience this as a short flash of unstyled text after which the page is displayed correctly. Webkit browsers (Safari) take a different approach and hide the text until the fonts have been loaded.
One way to mitigate this problem is to hide the page and/or text manually until it has been loaded. Examples are here. Just make sure your site will not depend on the fonts being loaded, because in a worse case scenario this will result in your site remaining hidden when the font service is unreachable.