At Google I/0 2019, we announced that we would finally be bringing support for
font-display to Google Fonts. I'm happy to share this is now available in production for all Google Fonts users via the new
Shipped! @GoogleFonts now let's you control web font loading using— Addy Osmani (@addyosmani) May 15, 2019
font-display. Say hello to the
What's font-display? https://t.co/Q7RDeESwkm pic.twitter.com/sn27ySza1B
font-display descriptor lets you decide how your web fonts will render or fallback, depending on how long it takes for them to load. It supports a number of values including
Previously, the only way to specify
font-display for web fonts from Google Fonts was to self-host them but this change removes the need to do so. To set
font-display, pass the desired value in the querystring display parameter:
Here's a demo on Codepen of using
display with multiple font families.
Note: The introduction of
font-display doesn't negate the benefits of other optimizations to reduce server hops, such as preconnecting to improve your waterfalls. I would still recommend doing this.
It's been exciting to see developers already start to see performance gains from the rollout of this feature and we would it helps you too:
Using Google Font's new display param saved us 800ms on First Meaningful Paint @addyosmani @SpeedCurve #webperf pic.twitter.com/Oa9HpXtzC3— Josh Deltener (@hecktarzuli) May 16, 2019
To learn more about the benefits of
font-display, check out:
- Monica Dinculescu's font-display playground and explainer.
- Katie Hempenius's avoiding invisible text while font-loading guide.
- Rob Dodson's controlling font-loading performance article.
Specific to this change, also see:
- Zach Leatherman's Google Fonts is shipping font-display
- Chris Coyier's Google Fonts and font-display
These patches close out issue #358 which was first filed back in 2016. You might be wondering why it took us so long to support a 'simple' query parameter :)
Our original discussions focused on Google Fonts having a high cache hit rate. The introduction of any new query parameters could be viewed as contenious because additional permutations could reduce cross-site cache hit rates.
We then spent time thinking about how to enable this change at the Web Platform level (outside of Fonts) via @font-feature-values. This would have allowed you to control the display policy for @font-face rules that are not directly under your control. Over time, the CSSWG discussed this, but there were proposals for a more general way of doing partial at-rules that made it less viable in the short term.
Double-key caching changed the original caching argument (cross-origin caching) and gave us a chance to re-evaluate our options. Ultimately, the Google Fonts team felt there would be enough end-developer value to ship
font-display as a query-parameter and we managed to wrap this work up within the last week.
Thanks to developers to waiting this out and providing regular feedback along the journey. It was neat to see so many workarounds explored while we worked on this :)
Credits and thanks
This effort would not have been possible without Roderick Sheeter, Nathan Williams, Dave Crossland, Kenji Baheux, Paul Irish, Malte Ubl and Sam Saccone. Thanks for helping getting this one across the finishing line <3