Web font
A web font is a font resource delivered through the web for rendering text in web pages or applications without requiring local installation.
CSS in Depth, Second Edition
A web font is a font made available to a web page through font resources that can be downloaded or selected locally by the browser.
- How it is used
- Uses downloadable typefaces to shape a page’s visual tone beyond commonly installed system fonts.
- How deep it goes
- Works through hosted integration, font-face definitions, and loading trade-offs; defers deeper performance treatment.
- Examples
- Shows contrasting font pairs, a Google Fonts stylesheet link, and Roboto body text paired with Sansita headings.
- What you can do after
- Apply it via Google Fonts or self-hosted `@font-face` rules while choosing variants and fallback behavior deliberately.
Web Design Playground, Second Edition
A web font is a font made available to a web page through web resources rather than requiring installation on the user's device.
- How it is used
- Uses web resources to give pages more consistent typography than system fonts can provide.
- How deep it goes
- Defines hosted font files, explains @font-face and hosting choices, and demonstrates third-party setup without detailing custom file hosting.
- Examples
- Demonstrates Google Fonts link tags and applies Lato through a CSS font-family declaration.
- What you can do after
- Apply it via Google Fonts by linking selected styles in HTML and assigning the hosted typeface in CSS.
Read how Web Design Playground, Second Edition explains web font →
Web Design Playground
A font file delivered over the web for use in rendering text on a page rather than relying only on locally installed fonts.
- How it is used
- Uses hosted font files to make page typography more consistent across visitors’ computers.
- How deep it goes
- Defines web fonts and gives a third-party setup workflow, but stops short of detailing self-hosted implementation.
- Examples
- Uses Google Fonts, Fonts.com, Adobe Typekit, Lato, generated link elements, and font-family rules.
- What you can do after
- Apply web fonts via a hosted link and a CSS font-family declaration.
Related concepts
- @font-faceuses · The CSS @font-face at-rule defines a font resource and descriptors that associate it with a font family and style.
- font-displayconfigured by · The CSS font-display descriptor controls how text is rendered while a web font loads or is unavailable.
- fonthas part · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
- font-size propertyhas part · The CSS font-size property specifies the nominal size of an element’s rendered text.
- font stylehas part · A font style is a stylistic variant of a typeface distinguished by properties such as weight, width, slant, or spacing.
- link elementused by · The HTML link element declares a relationship between a document and an external resource or resource metadata.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.