Typefaces Load Faster and Render the Same Everywhere
Web fonts are now served from our own delivery network rather than requested from a third-party font service. Faster, more consistent, and one fewer outside party involved in loading your page.
Three problems with the old arrangement
Speed. Requesting a font from another service means a fresh connection to a different host: a lookup, a handshake, then a stylesheet, then the font files it names. That is several round trips before a single letter can be drawn, and it happens before the page can finish rendering.
Consistency. A third-party service updates its files on its own schedule. A typeface can change subtly, and a site that looked right last year can shift in spacing without anybody touching it.
Privacy. Every visitor to your site was making a request to another company, which tells that company who is visiting your site. In several jurisdictions that is a genuine legal question and not merely a preference.
What changed
- Font files are stored with everything else and served from the same delivery network as your images, described in image hosting moves to a global CDN.
- Only the weights a design actually uses are loaded. Several designs were pulling six weights and using two.
- Subsetting removes glyph ranges the site does not need, which is most of a large font file.
- Text appears immediately in a fallback and swaps when the font arrives, rather than the page sitting blank.
That last point in particular
The default behavior of a web font is to hide the text until the font arrives. On a slow connection that means several seconds of a page with images and no words. It is a bad trade in every case and it is now switched off across the catalog.
What you will notice
Type appearing sooner. On a fast connection the difference is subtle. On a phone on mobile data it is the difference between a page that looks broken for two seconds and one that does not.
Related
Choosing a typeface is covered in font choices for actor websites. The rest of the performance work is in faster page loads and faster stylesheets.
Create a free actor website and get all of it by default.
