Making Google Fonts Faster⚡

Sia Karamalegos
Feb 6 · 7 min read
Photo by Bob Newman on Unsplash (cropped)

But Why?

FOIT in action — note the missing navbar text in the filmstrip screenshot (throttled to slow 3G)

If you do nothing else, at least preconnect…

Loading Google Fonts without preconnect
Loading Google Fonts with preconnect to fonts.gstatic.com

Even better: self-host for full control

Step 1: Use google-webfonts-helper to download our fonts and provide basic CSS font-face declarations

Step 1: Select a font.
Select your character sets and styles (weight and style).
Open Sans supports many more character sets including Cyrillic, Greek, Vietnamese, and extended sets.
Select “Best Support” for all file formats or “Modern Browsers” for only WOFF and WOFF2.

Step 2: Loading Optimization

Loading from Google with preconnect to fonts.gstatic.com
Self-hosting fonts and using preload

Step 3: Fix FOIT and FOUT (optional)

subfont

Additional Considerations

Host static assets on a CDN

Size and Popular Fonts

Resources you should checkout

Clio + Calliope

Our expert team builds clean, beautiful, and easy-to-use websites and mobile apps. Let’s create something together.

Sia Karamalegos

Written by

Google Developer Expert in web technologies, traveler, code teacher, endurance racer, speaker, dog lover, crochet pattern designer, New Orleanian

Clio + Calliope

Our expert team builds clean, beautiful, and easy-to-use websites and mobile apps. Let’s create something together.