𝗜 𝗦𝘁𝗼𝗽𝗽𝗲𝗱 𝗨𝘀𝗶𝗻𝗴 𝗚𝗼𝗼𝗴𝗹𝗲 𝗙𝗼𝗻𝘁𝘀 𝗖𝗗𝗡
Loading fonts from a Google CDN slows down your site.
I used to use a single link in my header. It felt easy. Then I checked my Lighthouse scores.
The report showed a problem. The browser had to make extra connections to Google's servers. It had to perform DNS lookups and TLS handshakes. This caused delays. On a slow mobile connection, the text stayed invisible for too long.
I switched to self-hosting. It took one afternoon. Now I do it for every project.
Here is the setup you need:
- Use WOFF2 format. It is 30% smaller than WOFF. You do not need old formats like .ttf or .eot anymore.
- Convert your fonts. Use the fonttools library to compress .ttf files into .woff2.
- Use the font-display: swap property. This shows fallback text immediately. It prevents invisible text while your font loads.
- Preload critical fonts. Add a preload link to your head for fonts used above the fold.
- Always use the crossorigin attribute. If you forget this, the browser downloads the font twice.
- Subset your fonts. If your site uses English, remove unused glyphs. This can reduce file size by 70%.
- Cache your files. Use a long cache-control header to keep fonts in the browser.
The workflow is simple: Convert to WOFF2. Use @font-face with swap. Preload the main font with crossorigin. Cache the file.
This setup improves your loading speed and removes a third party from your critical path.
Do you still use the Google CDN for production? Tell me why in the comments.