System font
A system font is a typeface installed on an operating system and available for local text rendering.
Web Design Playground, Second Edition
A system font is a typeface installed on a user's computer and available to that user's web browser.
- How it is used
- Uses installed typefaces to control web-page typography while preserving a fallback when visitors lack the preferred font.
- How deep it goes
- Explains installation-based selection, quoting, ordered font stacks, and generic fallbacks, but does not cover font loading internals.
- Examples
- Demonstrates Times New Roman, Georgia, Verdana, Optima, Calibri, and fallback stacks applied to page elements.
- What you can do after
- Apply system fonts through CSS font-family declarations with ordered fallbacks and matching generic families.
Read how Web Design Playground, Second Edition explains system font →
CSS in Depth, Second Edition
A system font is a typeface installed on the user's operating system and available for local text rendering.
- How it is used
- Uses installed typefaces for immediate local rendering or as fallbacks during web-font loading.
- How deep it goes
- Explains availability, fallback rendering, layout shift, and font-dependent units, but stops short of detailed font-stack syntax.
- Examples
- Uses Arial, Helvetica, and Georgia, plus FOUT and cross-operating-system system-font stacks, as concrete examples.
- What you can do after
- Evaluate font-loading trade-offs and choose when installed fonts or system-font stacks reduce download-related rendering problems.
Read how CSS in Depth, Second Edition explains system font →
Related concepts
- font file formatalternative to · A font file format is a specification for encoding and storing font data so software can render typefaces and glyphs.
- font stackused by · A font stack is an ordered list of typefaces that specifies fallback choices when earlier fonts are unavailable.
- font-family propertyused by · The CSS font-family property specifies a preferred typeface or ordered sequence of fallback typefaces for rendering text.
- generic fontalternative to · A generic font family is a CSS keyword representing a broad category of typefaces that browsers can select as a fallback.
- fontcontrasts with · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
- typographycontrasts with · Typography is the design and arrangement of written text, including typeface, size, spacing, alignment, and layout, to support readability and visual communication.
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.