Rendering Fonts in Today’s Browsers
Update: Since this post was published, we’ve released Font Events to help you control how fonts load on a page. Read on for details.
All new technologies come with unique quirks — and using fonts with CSS and
@font-face is no different.
When experimenting with linked fonts, we have noticed that there can be a delay between when a page loads and when a font displays. It’s by no means ideal, and as designers we cringe when it happens. But why does it happen, and what can we do about it?
All the way back
The browser must decide how to handle each of these resources. Each one may take from several milliseconds to a few seconds to retrieve. During that time, a decision must be made whether to display the page without the resource, or to wait until it arrives.
Browser developers each have differing philosophies on what to do in this situation. For example, Safari will wait until it has obtained all known resources before displaying the page. Firefox will display the page while it waits for a resource to download. Both of these methods is perfectly valid; they simply prioritize one thing over another. The manifestation of these decisions is what users ultimately see when they load a web page.
The best right now
The first step is to get the fonts to the browser as quickly as possible. To do this, Typekit has servers on each continent, ensuring that all users have the fastest possible connection to our fonts. This gives our service a consistent starting point — it then comes down to an individual user’s geography, internet connection, browser, and operation system to determine their final experience.
Over the years, browsers have evolved and refined the way they display web layouts, images, and other resources. We fully expect to see improvements in the handling of fonts loaded via
@font-face as well. We’re also looking forward to future formats such as WOFF and EOT Lite to provide compression and other optimizations for fonts online. And we’re working with standards bodies and browser makers to better understand how to make progress in all of these areas.
In the meantime, Typekit will continue to improve the actual and perceived speed of font rendering, and give as much control as possible to the designers and developers using our service.