Improving Google Fonts Performance

Mike's Notes

I use the Noto Sans font at Ajabbi. This may improve speed performance.

Resources

• https://github.com/scottjehl/google-fonts-testing
• https://www.webpagetest.org/video/compare.php?tests=240830_BiDcV6_DBD%2C240830_BiDc0G_DBE%2C240830_BiDcHP_DBF%2C240830_BiDcXG_DBG%2C240830_BiDcHS_DBH%2C240830_BiDcH5_DBJ&thumbSize=100&ival=100&end=visual

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

18/05/2025

Improving Google Fonts Performance

By: Cosima Mielke (cm)

Smashing Magazine: #475, 25/09/2024

How can we make Google Fonts load faster? Scott Jehl set up a repository for testing Google’s default font embed code against more optimal approaches. The setup loads the SUSE Google Font from Google’s font server in a variety of ways to find out which approach is most efficient.

As Scott’s tests show, loading fonts with @font-face is faster than the render-blocking default embed we get from Google. The greatest performance improvements show when @font-face is combined with font-display: swap. In this case, text rendering happens a full second sooner than the default Google embed. And even when the page doesn’t use font-display: swap, using @font-face still renders the pages 300ms earlier than the Google standard solution. (cm)