A web font is a font file hosted on the web and loaded for a page through CSS. Instead of hoping visitors have the right typeface installed, the browser can load the chosen font so everyone sees the same typography. section 18.5
System fonts are limited and may not be installed on every computer. Web fonts solve that uncertainty, although fonts hosted elsewhere can take extra time to load. section 18.5 section 18.6
A simple third-party hosted-font workflow looks like this:
- Choose a typeface from a font-hosting service such as Google Fonts, Fonts.com, or Adobe Typekit. section 18.6
- Select only the styles you need, such as regular, italic, or bold; adding more fonts can slow loading. section 18.6
- Copy the generated link element into the head of the HTML page. section 18.6
- Use the font name in a CSS font-family declaration. section 18.5 section 18.6
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
A generated link tells the browser where to obtain Lato and which weights or styles to load. section 18.6
p {
font-family: Lato, sans-serif;
}
This CSS rule applies Lato to paragraphs and keeps sans-serif as the fallback family. section 18.6
A practical choice
For a page that needs regular, italic, and bold text, link only those three variants rather than loading every available style. The smaller selection keeps the design focused and avoids unnecessary font-loading work. section 18.6
