Using Google Fonts

Google Fonts provides hundreds of free, open-source typefaces served from Google's global CDN. Loading them correctly avoids layout shift and performance regressions.

Embedding via Link

Add a <link> element in your HTML <head>. Use rel="preconnect" hints to start the DNS handshake early.

Subset and Weight Selection

Only request the weights and character subsets you actually use. Requesting every weight bloats the download unnecessarily.

CSS @import (Avoid)

Using @import inside CSS delays font loading — the browser must first download the CSS, then discover and download the font. Prefer the HTML <link> approach.

font-display: swap

Append &display=swap to the Google Fonts URL to use font-display: swap, preventing invisible text during font load.

Example

<!-- HTML head — fastest loading approach -->
<!--
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
-->

/* CSS usage after embedding */
body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

h1, h2 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
}

/* Self-hosting alternative with @font-face */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-v13-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

CSS

Full Editor

Pro Tip

For production sites, consider self-hosting fonts downloaded from Google Fonts — it eliminates the third-party DNS lookup, keeps your site functional if Google's CDN is unavailable, and preserves user privacy.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned