Want more? Subscribe to my free newsletter:

We shipped font-display to Google Fonts!

May 16, 2019

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 display parameter.

The 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 auto, block, swap, fallback and optional.

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:

https://fonts.googleapis.com/css?family=Lobster&display=swap

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:

To learn more about the benefits of font-display, check out:

Specific to this change, also see:

Extra history

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