Text is the most basic content carrier of a web page, and font-related properties decide "what the characters look like". This section covers basic properties such as the font family, size and weight; the next section covers text properties that lean more toward "typography", such as line-height and alignment.
font-family
font-family accepts a "fallback list" made up of concrete font names followed by generic family names; the browser looks for the first locally available font in order.
body {
font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
}
Generic family
Characteristics
serif
Serif: strokes end with decorative details; a more traditional reading feel for body text
sans-serif
Sans-serif: clean strokes; the most common choice for interfaces
monospace
Monospace: fixed-width characters, used for code display
cursive / fantasy
Handwriting / decorative fonts; use sparingly in body text
Font family comparison
serif — The quick brown fox
sans-serif — The quick brown fox
monospace — The quick brown fox
TipAlways put a generic family name (such as sans-serif) at the end of the fallback list; otherwise the browser's behavior is unpredictable when none of the concrete fonts are available.
font-size and font-weight
font-weight commonly uses numeric values 100–900, and keywords such as normal (400) and bold (700); but how many actual weight tiers render depends on whether the font file itself provides them.
NoteUsing the font shorthand resets related properties not listed explicitly to their initial values (such as font-variant, font-stretch); if you set these separately beforehand, they may be unintentionally overridden.
@font-face Custom Fonts
When you need to bring in a brand font specified in the design, or a font not available on the system by default, declare the font resource with @font-face, then reference it through font-family.
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans.woff2") format("woff2");
font-weight: 400 700; /* weight range of a variable font */font-display: swap; /* show the fallback font until the font loads, avoiding invisible text */
}
body { font-family: "Brand Sans", sans-serif; }
Tipwoff2 is the Web font format with the best compression ratio and browser support today; combined with font-display: swap it significantly improves the "flashing invisible text" (FOIT) experience.
Common Pitfalls
Writing only concrete font names without a generic fallback causes abnormal text rendering in special environments.
Setting a font-weight value the font itself does not have makes the browser render a "fake bold" (software-simulated bold), degrading the visual quality; check the actual weight tiers the font file provides.
Using the font shorthand while forgetting that it resets unlisted properties.