Enable font-display on Google Fonts with Cloudflare Workers
I have posted an improved iteration which is significantly faster! Check out how to supercharge Google Fonts with Cloudflare and Service Workers 🚀
While Google Fonts is quite fast out of the box, Google’s own web page auditing tool, Lighthouse, has been (justifiably!) nagging developers to improve performance by enabling font-display. Unfortunately, this isn’t currently supported out of the box and has been an issue for over two years.
Cloudflare to the rescue
Here is a simplified version of the worker I use for Jirafe:
Whenever requests come in from fonts.jirafe.io, they are immediately forwarded to fonts.googleapis.com and, once a response is received, it adds in font-display to every @font-face declarations, instantly improving time to first meaningful paint.
I feel like this is one of many powerful use cases for Cloudflare Workers and it has been working very well for Jirafe, waiting for fonts to load was the last big hurdle to allowing the (admittedly simple) page to load incredibly fast even on mobile devices.