CSS / Reference / font-family: Font Lists, Glyph Fallback, and Loading

font-family lists font candidates in priority order. Selection also depends on glyph coverage, so one sentence can use different fonts for different characters.

Syntax and value choices

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

body { font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
code { font-family: Consolas, monospace; }

For supported values and conditions, see MDN font-family.

Run the example and compare results

Save this complete code as css-reference-10551-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-family comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target { font-family: Georgia, serif; font-size: 24px; }
.reference { font-family: Consolas, monospace; font-size: 24px; }
</style>
</head>
<body>
<main id="demo">
<h1>font-family comparison</h1>
<section class="samples"><div class="a"><p class="label">Georgia, serif</p><div class="target">ABC 012345 / Font comparison</div></div><div class="b"><p class="label">Consolas, monospace</p><div class="reference">ABC 012345 / Font comparison</div></div></section>
</main>
</body>
</html>

The samples request different font families. Installed fonts and script coverage affect the actual glyphs; do not treat one operating system’s screenshot as a universal result.

Finish with a generic family

Separate candidates with commas and write generic names without quotation marks. "sans-serif" can be interpreted as a specific named family instead of the generic. A final generic gives the browser a fallback when named candidates are absent.

Naming a font does not deliver its file

A family name alone does not download a font. Supply licensed files through an appropriate mechanism such as @font-face. Use the developer tools’ rendered-font information to distinguish missing faces from missing glyphs.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

1. Inspect the actual glyphs in Elements → Computed → Rendered Fonts, selecting script passages separately where relevant. Record the candidate list and rendered font independently.
2. Temporarily use a nonexistent practice family first, observe fallback, and restore the original stack. Another OS can choose a different actual face.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are font-weight.

When the result is missing or unexpected

• Check spelling, commas, quotation marks, and the intended generic fallback.
• Inspect network requests and matching @font-face family names.