A font is a specific variant within a typeface, distinguished by characteristics such as weight or style. Choosing the right font changes both a page’s visual tone and its readability. section 12.3 section 12.2
Use fonts deliberately when building a page:
- Prefer web fonts when the design depends on a typeface that users may not have installed; use @font-face or a font service to make it available. section 12.2
- Select the required weights and styles rather than assuming every typeface provides the same range. Numeric weights can include 100, 400, 700, and 900. section 12.3
- Assign complementary fonts to different roles, such as Roboto for body text and Sansita for headings and navigation. section 12.3
- Check thin fonts more carefully: identical colors can produce weaker perceived contrast when the weight is very light. section 11.4
Applying selected web fonts
Load the selected families with the generated stylesheet link, then assign them by role: body { font-family: Roboto, sans-serif; } h1, h2, h3, h4 { font-family: Sansita, serif; } .home-link { font-family: Sansita, serif; font-weight: bold; } section 12.3 section 12.3
Listing 12.6 Stylesheet <link> tags for Google Fonts
<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=Roboto:wght@300&family=Sansita:wght@800&display=swap" rel="stylesheet" />
Use the stylesheet-link listing to inspect how selected Google Fonts are embedded with specific families and weights. section 12.3
