font-family
Setting the font for an element.
Overview
| Class | Declarations |
|---|---|
font-family:`value` | font-family: `value`;
|
font:sans | font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
font:serif | font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
font:mono | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
font:sans-fallback | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
font:serif-fallback | font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
font:mono-fallback | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
Examples
Basic usage
Use tokens like font:sans, font:serif and font:mono to set font families for elements.
<p class="font:sans">Heavy boxes perform quick waltzes and jigs.</p><p class="font:serif">Heavy boxes perform quick waltzes and jigs.</p><p class="font:mono">Heavy boxes perform quick waltzes and jigs.</p>Set the font family
Set the typeface of an element using the font-family: syntax.
<p class="font-family:cursive">Heavy boxes perform quick waltzes and jigs.</p>In practice, you wouldn't arbitrarily set the font family within the template; instead, you would unify your fonts through custom fonts.
Apply fonts globally
Relying on the font-family inherited behavior, you can set the entire page font in <body>.
<body class="font:sans">…</body>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="font:mono:hover font:mono@sm font:mono@dark font:mono@print">…</div>Apply fonts to specified elements
Use the _:is(code,pre) to select specified elements and apply the font.
<body class="font:mono_:is(code,pre)">…</body>Resolve whitespaces in the value
Whitespace is used in the class attribute of the template to separate different classes. To replace whitespaces with non-breaking spaces \00a0.
<p class="font-family:'Open\00a0Sans'">…</p>Is it not very kind to use \00a0 in markup?
Predefine your font variables without \00a0.
/** @type {import('@master/css').Config} */export default { variables: { 'font-family': { 'open-sans': 'Open Sans' } }}Apply your custom fonts:
<p class="font:open-sans">…</p>Customization
Use custom fonts
Customize your font tokens by defining variables. For example, add Inter as the general font and Fira Code as the code font.
export default { variables: { 'font-family': { sans: '"Inter", $font-family-sans-fallback', mono: '"Fira Code", $font-family-mono-fallback', } }}Apply the defined font-family variables. For example, presetting the global fonts in <body>:
<body class="font:sans font:mono_:is(code,pre) font-feature:'salt'">…</body>Don't forget to add the font faces.
Google fonts
The fastest way to declare custom font faces is through Google Fonts.
<!DOCTYPE html><html lang="en"><head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> </head></html>Self-hosted fonts
You can also self-host the fonts via native CSS, as usual.
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2");}