@font-face lets a page download custom fonts and associate each resource with a family, style, and weight instead of relying only on installed web-safe fonts. Custom typefaces can substantially change a page’s tone, while hosted font services simplify hosting and licensing. section 12.2
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;
}
Shows how font-family, font-style, font-weight, src, font-display, and unicode-range descriptors identify and load a font resource. section 12.4
Use separate definitions when a typeface has multiple variants, and choose loading behavior deliberately:
- Define each required weight or style with its own @font-face rule; otherwise the browser approximates missing variants and may create faux bold or faux italic. section 12.4.2
- Use unicode-range to split character sets into smaller files so extended scripts download only when needed. section 12.4
- Set font-display to control loading: swap shows fallback text immediately, while fallback and optional balance visibility, speed, and eventual font use. section 12.5.1
- Limit the number of web fonts because font resources add substantially to page size; use variable fonts when available. section 12.7
Registering separate Roboto weights
Define the same family twice, changing the weight and source for each resource: @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url(light.woff2) format('woff2'); } and @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(bold.woff2) format('woff2'); }. Styles using those weights can then select the matching font files. section 12.4.2
