font-family
Select a font stack, preserve inheritance and load custom faces with explicit fallbacks.
Overview
| Class | Declarations |
|---|---|
font-sans | font-family: var(--font-family-sans);
|
font-serif | font-family: var(--font-family-serif);
|
font-mono | font-family: var(--font-family-mono);
|
font-family:<value> | font-family: <value>;
|
Examples
Basic usage
Use a family token to give related content a consistent typeface and fallback stack.
font-sans, font-serif and font-mono select the preset family stacks. Their resolved typefaces depend on the available fonts and any project overrides.
<!-- font-sans --><p id="target" class="m:0 font-sans font-xl leading-md">Design with clarity.</p><!-- font-serif --><p id="target" class="m:0 font-serif font-xl leading-md">Design with clarity.</p><!-- font-mono --><p id="target" class="m:0 font-mono font-xl leading-md">Design with clarity.</p>Set the font family
Use font-family:* for a native family value. Generic families such as cursive resolve to a platform font, so this specimen may look different across devices.
<!-- A platform-selected cursive face --><p id="target" class="m:0 font-family:cursive font-xl leading-md">Design with clarity.</p>Apply fonts globally
Set font-sans on <body> to establish the inherited family. These nested paragraphs do not declare their own font family.
<!-- The actual preview body owns the family --><body class="font-sans"> <main class="font-xl leading-md"> <p id="target" class="m:0">A shared reading voice.</p> <section><p class="m:0">Inherited through another element.</p></section> </main></body>Apply conditionally
Hover or keyboard-focus the button to switch from the sans stack to the mono stack. Its text stays the same, but the glyph advances can change.
<!-- A family change on a real state --><button type="button" id="target" class="font-md font-sans font-mono:hover font-mono:focus-visible">Focus or hover to compare</button>Apply fonts to specified elements
The descendant selector _:is(code,pre) applies font-mono to matching elements below the body. Regular paragraphs keep the inherited sans family.
<!-- Sans prose · mono code --><body class="font-sans font-mono_:is(code,pre)"> <main class="font-md leading-md"> <p id="target" class="m:0">Prepare a clear canvas.</p> <pre class="mx:0 mb:0 mt-sm"><code id="code">const ready = true</code></pre> </main></body>Resolve whitespaces in the value
Spaces separate classes in HTML. For a literal family name, the CSS escape \000020 represents a space without splitting the class. Six hex digits make the escape unambiguous. The escaped name must match the loaded font’s declared family; \00a0 would represent a different, non-breaking-space character.
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');}<!-- An escaped family name --><p id="target" class="m:0 font-family:'IBM\000020Plex\000020Mono' font-xl leading-md">Design with clarity.</p>@theme { --font-family-code: 'IBM Plex Mono', monospace;}<!-- The same face through a readable token --><p id="target" class="m:0 font-xl leading-md font-code">Design with clarity.</p>Prefer a token for repeated use. Defining a family token does not download the font file.
Customization
Use custom fonts
Override the preset sans and mono stacks using --font-sans and --font-mono. Load matching faces as well; a theme token only supplies the family name.
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/GeistVariable.woff2') format('woff2');}@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');}@theme { --font-sans: 'Geist'; --font-mono: 'IBM Plex Mono';}<!-- Loaded custom faces · inherited and selected --><body class="font-sans font-mono_:is(code,pre)"> <main class="font-xl leading-md"> <p id="target" class="m:0">Design with clarity.</p> <pre class="mx:0 mb:0 mt-sm"><code id="code">const ready = true</code></pre> </main></body>Google fonts
A hosted stylesheet declares the font faces; a family class then applies them. This preview requests Roboto from Google Fonts and reports whether a matching face loaded. When the request is blocked or unavailable, the fallback remains readable.
<!-- A hosted stylesheet and its actual consumer --><!doctype html><html lang="en"><head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap"></head><body> <p id="target" class="m:0 font-family:Roboto,sans-serif font-xl leading-md">Design with clarity.</p></body></html>Use a fallback stack and verify that the stylesheet includes the weights, styles and characters your content needs.
Self-hosted fonts
Declare a face with @font-face, using the path of your own font file. The variable face below advertises its supported 100–900 weight range and uses swap to keep text visible while loading.
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/GeistVariable.woff2') format('woff2');}@theme { --font-family-interface: 'Geist', sans-serif;}<!-- A locally hosted variable face --><p id="target" class="m:0 font-weight:550 font-xl leading-md font-interface">Design with clarity.</p>Keep the declared range consistent with the actual file. Feature availability also depends on that file, not just the family name.