A web font lets a page use a typeface beyond the fonts commonly installed on visitors’ devices. The choice can change a design’s tone: the same words can feel formal, informal, or playful with different font pairs. Unlike a system font, a downloadable font also adds resources the browser must load. section 12.2 section 12.3
To use a hosted font, select the families and weights you need, add the provider’s stylesheet link to the HTML head, then name those families in CSS with system-font fallbacks. For example, body text can use `font-family: Roboto, sans-serif`, while headings use `font-family: Sansita, serif`. A provider handles hosting and licensing; defining your own `@font-face` rules is an option for fonts you host yourself. section 12.2 section 12.3 section 12.4
Listing 12.8 Google’s font definition stylesheet
/* latin */
@font-face { #1
font-family: 'Roboto'; #2
font-style: normal; #3
font-weight: 300; #3
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4
AMP6lQ.woff2) format('woff2'); #4
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; #5
}
/* latin */
@font-face {
font-family: 'Sansita';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/sansita/v11/QldLNTRRphEb_-V7JLmXWX5
-w4dsz_k.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
The font definition shows how `@font-face` associates a family, style, and weight with a downloadable WOFF2 file. Its `unicode-range` limits the characters served by that rule, allowing separate character sets to load only when needed. section 12.4
Choose fonts with both appearance and loading behavior in mind:
- Select only the weights and styles the page uses. Each extra variant can mean another download; a variable font can package multiple variants in a smaller file. section 12.3 section 12.7
- Provide a fallback. Showing it immediately keeps text readable but may cause a visible layout shift when the web font arrives (FOUT); hiding text until the font loads avoids that shift initially but produces invisible text (FOIT). section 12.5
- Set `font-display` inside `@font-face` to choose the trade-off: `swap` shows fallback text immediately, `fallback` allows a brief invisible period, and `optional` may keep the fallback on a slow connection. section 12.5.1
Font choice and spacing belong together. A different typeface changes the space text occupies, so check line height and the surrounding layout after replacing fonts—not just whether the new face looks right. section 12.0 section 12.5 section 12.7
