liveBook · Manning

Web-safe font

As explained in Tiny CSS Projects

A web-safe font is a typeface commonly expected to be available across many devices and browsers without web delivery.

A web-safe font is a typeface that most devices are expected to provide without downloading it. Because availability varies, pair every chosen family with a fallback such as serif, sans-serif, monospace, cursive, or fantasy. section 4.1.1

Commonly listed web-safe choices include:

  • Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, and Brush Script MT. section 4.1.1
  • No official standard defines the category or guarantees availability on every browser and device. section 4.1.1
  • Use a fallback even when selecting a commonly available family, because the preferred font may still be unavailable. section 4.1.1

A font family with a fallback

body { font-family: 'PT Serif', serif; } uses PT Serif when it is available and falls back to the generic serif family when an imported font cannot be used. PT Serif and Oswald are imported because users cannot be expected to have them installed. section 4.1.1

How Tiny CSS Projects covers it

How deep it goes
Defines the category, lists examples, and explains fallback practice; stops short of guaranteeing availability because no official standard exists.
Examples
Uses Arial, Verdana, Georgia, Courier New, PT Serif, and Oswald to contrast available and imported typefaces.
What it assumes
Assumes a CSS font-family declaration and teaches why imported fonts still need fallback values.
What you can do after
Apply it via CSS font-family declarations that include a generic fallback for unavailable preferred fonts.
How it connects
Connects font-family declarations with imported fonts, generic fallback families, and inherited typography.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.