The CSS `font-family` property chooses the typeface for text. Give it a preferred family followed by a fallback: `font-family: 'PT Serif', serif;`. If the chosen font cannot load, the browser can use the generic `serif` family instead. Other generic fallbacks include `sans-serif`, `monospace`, `cursive`, and `fantasy`. Even fonts commonly available on devices are worth giving a fallback. section 4.1.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;
}
A newspaper page imports PT Serif and sets it on `body`. Descendants inherit that family, giving the page a consistent starting point. section 4.1.1
Import a font before naming it in CSS when you cannot expect visitors to have it installed. A title can then use a different family from the body: the newspaper pairs PT Serif body text with an Oswald heading. Font size, weight, line height, and capitalization can be adjusted alongside the family without changing the text in the HTML. section 4.1.1 section 5.3.1
Listing 4.3 Styling the newspaper title
@import url('https:/ /fonts.googleapis.com/css2?
family=Oswald:wght@400;700&family=PT+Serif&display=swap'); #1
h1 {
font-weight: 700; #2
font-size: 4rem;
font-family:'Oswald', sans-serif;
line-height: 1;
text-transform: uppercase;
text-align: center;
}
The heading rule sets `font-family: 'Oswald', sans-serif;`, overriding the family inherited from `body` while retaining a fallback. section 4.1.1
Give different card text different voices
For a set of hotel cards, Rubik supplies readable, rounded headings while italic Cardo supplies the descriptions. The CSS `font` shorthand can set a family with other typography values: `font: 14px "Rubik", sans-serif;` for card content and `font: italic 1.125rem "Cardo", cursive;` for descriptions. Multiple Google Fonts can be loaded in one request. section 5.1 section 5.4.2
A family choice also affects details beyond letters. In a checkout cart, Raleway’s default old-style numerals did not line up as desired for a stacked total. `font-variant-numeric: lining-nums` changed their appearance; it complements rather than replaces the `font-family` choice. section 8.2.1
Check form controls separately. Text and email inputs do not inherit font styles by default, so `font-family: inherit;` makes them use their parent’s family. Setting their size and color explicitly or to inherit helps them match the surrounding page. section 10.3.1
If fonts come from a content delivery network, check its privacy and data terms against applicable local requirements. Loading fonts locally is an alternative when a CDN is not suitable. section 4.1.1
