font-family
Setting the font for an element.
Overview
| 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;
|
sansHeavy boxes perform quick waltzes and jigs.
serifHeavy boxes perform quick waltzes and jigs.
monoHeavy 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"> <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 applying conditionally.
<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>Customization
Check out the custom variables.