How to Use Google Fonts on Any Website (The Right Way)

Google Fonts is the most popular web font service in the world — but most developers implement it in ways that hurt performance. Here's the correct approach.

The Wrong Way (What Most Tutorials Show)

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

This works, but it blocks rendering and causes Cumulative Layout Shift (CLS) — your text renders in a fallback font, then jumps to the web font when it loads. Google's Core Web Vitals will penalise you for this.

The Right Way: Preconnect + Display Swap

<!-- 1. Preconnect to Google Fonts origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 2. Load with font-display: swap -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

The preconnect hints tell the browser to establish connections to Google's servers before it even starts downloading the CSS. This shaves 150-300ms off the font loading time on first visit.

Load Only the Weights You Need

Every weight you load adds to your page weight. If you only use Regular (400) and Bold (700), don't load 100, 200, 300, 500, 600, 800, 900. Each weight is a separate request and download.

Self-Hosting for Maximum Performance

For the absolute best performance, download the fonts and self-host them. This eliminates the DNS lookup and connection to Google's servers entirely. Use font-display: swap in your @font-face declarations:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}

FontFinder lets you download any font directly — use our Browse section to find and download the exact font files you need.

Variable Fonts: The Best of Both Worlds

Variable fonts from Google Fonts give you all weights in one request:

family=Inter:wght@100..900

One file, complete weight range, cached forever after first visit.