[css-fonts-5] @font-face supports incremental · Issue #6063 · w3c/csswg-drafts
This could give a big boost to web performance!
Flash of Faux Text—still more on Font Loading—zachleat.com
Smart thinking on optimising the perceived performance of loading web fonts: if you prioritise the most widely-used weight and style (usually the regular roman), and load other weights and styles subsequently, then it appears as though the font is ready sooner.
Related links
System fonts don’t have to be ugly /// Iain Bean
You don’t have to use web fonts—there are some pretty nice options if you stick to system fonts (like Georgia, Charter, and Palatino).
The Font Loading Checklist—zachleat.com
This checklist came in very handy during a performance-related workshop I was running today (I may have said the sentence “Always ask yourself What Would Zach Do?”).
- Start Important Font Downloads Earlier (Start a Web Font load)
- Prioritize Readable Text (Behavior while a Web Font is loading)
- Make Fonts Smaller (Reduce Web Font load time)
- Reduce Movement during Page Load (Behavior after a Web Font has loaded)
The first two are really straightforward to implement (with rel="preload" and font-display). The second two take more work (with subsetting and the font loading API).
It’s Dangerous to Go Stallone. Take Glyphhanger | Filament Group, Inc., Boston, MA
You’ll need to be comfortable with using the command line, but this is a very useful font subsetting tool from those clever folks at Filament Group.
eBay’s Font Loading Strategy | eBay Tech Blog
Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.
Interestingly, they set a flag for subsequent visits using localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.