Syntax

Font Family

Setting the font for an element.

Class	Declarations
`font-family:value`	`font-family: value;`
`font:sans`	`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`	`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;`

sans

Heavy boxes perform quick waltzes and jigs.

serif

Heavy boxes perform quick waltzes and jigs.

mono

Heavy boxes perform quick waltzes and jigs.

Using shorthand with predefined variables to simplify the native syntax.

<div class="font-family:sans">
<div class="font:sans">Recommanded
<div class="f:sans">

Basic usage

Set the font family

Set the typeface of an element using the font-family: syntax.

Heavy boxes perform quick waltzes and jigs.

<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 variables.

Apply fonts globally

Relying on the font-family inherited behavior, you can set the entire page font in <body>.

<body class="font:sans">…</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>

Conditionally apply

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 _:where(code,pre) to select specified elements and apply the font.

<body class="font:mono_:where(code,pre)">…</body>

Customization

Check out the custom font guide.