Google Fonts is Adding font-display 🎉
May 15, 2019 renamed URL parameter to display. Thank you Mathias!
May 22, 2019 added note about display=swap in the default code embed.
At Google I/O this week, Anna Migas shared a photo of an Addy Osmani and Katie Hempenius session that dropped a font loading bombshell on the world.
You will not have to self-host Google Fonts any more to get font-display: swap; 🙌 #io19 pic.twitter.com/SldOuoNInF
— Anna Migas @ Google I/O (@szynszyliszys) May 8, 2019
Google Fonts is adding added support for font-display! 🎉🎉🎉🎉
Update My 15, 2019: although the I/O preview used the font-display URL parameter, the final implementation uses display instead
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">Update May 22, 2019: Houssein Djirdeh also noticed that display=swap is now used by default when you copy and paste code from the Google Fonts site. This is a really big deal for visible text. Full credit to the Google Fonts team for this.
Want to learn more about font-display? Check out this font-display Playground demo on Glitch from Monica Dinculescu.
This is big news—it means developers now have more control over Google Fonts web font loading behavior. We can enforce instant rendering of fallback text (when using font-display: swap) rather than relying on the browser default behavior of invisible text for up to 3 seconds while the web font request is in-flight.
It’s also a bit of trailblazing, too. To my knowledge, this is the first web font host that’s shipping support for this very important font-display feature. Yeah, the GitHub issue asking for this was filed in August of 2016 (just short of three years ago), but Google Fonts is still ahead of the competition here.
Timeline
| Date | Behavior | Vendor |
|---|---|---|
| 2017 | font-display Supported | Chrome (v60) was first to implement. |
| 2017 | font-display Supported | Opera (v47) was second to add support. |
| 2018 | font-display Supported | Firefox (v58) |
| 2018 | font-display Supported | Safari (v11.1) |
| 2018 | font-display Supported | Samsung Internet (v8.2) |
| 2019 | font-display Supported | Google Fonts |
| Not yet | font-display Not supported | Adobe Fonts |
| Not yet | font-display Not supported | Typography.com (by Hoefler&Co) |
| Not yet | font-display Not supported | fonts.com (by Monotype) |
(Monotype tip via @thomasdeinhamer)
Want a full history of FOIT and FOUT?
Related
Future wishlist
Stable font file URL in Google Fonts so that we can embed the CSS in our sites directly. This would alleviate the two-hop penalty you’re paying to use these fonts (one render-blocking hop for the CSS and another to fetch the font files). Not only would this be fewer hops, but then you could use it with preload too, which would be incredible.
Font URLs are cached for a year and CSS URLs are cached for only a day—@googlefonts
This font-display change is great and means that things are improving! But self hosting will continue to be my preferred method for these typefaces until this issue is resolved.