Font family

Syntax

Class
Properties
font-serif
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
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-mono
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-heading
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-body
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";

Customizing fonts

The above fonts can be customized on a per-project level.

Style vs context based fonts

Note that font-serif, font-sans and font-mono describe how the font shall look (its style), whereas font-heading and font-body describe the context in which the fonts are used.

Context based fonts are primarily for template authors who only know the context in which the font is used but not what style individual template users want to assign to the headings.

<div class="t1 w-256 p-16 bg-c-white shadow-4 font-sans"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ullamcorper neque. Donec placerat mi ut enim porttitor sagittis. </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
font-serif
t1 font-serif
.t1.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
font-sans
t1 font-sans
.t1.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-mono
t1 font-mono
.t1.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
font-heading
t1 font-heading
.t1.font-heading { 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-body
t1 font-body
.t1.font-body { 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"; }