Google Fonts provides freely available fonts that websites can import and use without requiring visitors to create accounts. Importing a font lets the browser render its glyphs when the typeface is not already installed. section 4.1.1
Use Google Fonts thoughtfully in a stylesheet:
- Import the selected family before the relevant CSS rules, then assign it with font-family. section 4.1.1
- Always provide a fallback such as serif, sans-serif, monospace, cursive, or fantasy if the import fails. section 4.1.1
- Combine multiple Google Fonts into one request when a design uses several families or weights. section 5.1
- Review CDN privacy and data terms, including applicable GDPR and European Union requirements, before loading fonts remotely. section 4.1.1
Typography for a responsive newspaper
A newspaper layout imports PT Serif for body text and uses serif as its fallback. A second import adds Oswald in regular and bold weights for the title, which is enlarged, centered, capitalized, and displayed in a sans-serif fallback. The body typography then inherits across its descendants. section 4.1.1
Typography for summary cards
A card layout uses italic Cardo for descriptions and regular and bold Rubik for headings. The contrasting typefaces support readable, informal hotel cards while one request loads the required Google Fonts. section 5.1
Listing 4.2 Defining some theme styles
@import url('https:/ /fonts.googleapis.com/css2?family=PT+Serif&display=swap'); #1
body {
background-color: #f9f7f1;
font-family: 'PT Serif', serif; #2
color: #404040;
padding: 0 24px;
}
Inspect the CSS listing to see a Google Fonts import placed before the body rule, followed by a font-family declaration with a serif fallback. section 4.1.1
