React Font family Utilities

Font family

Switch a selection to our monospace font stack.

Class	Styles
.font-monospace	font-family: var(--cui-font-mono);
.font-body	font-family: var(--cui-body-font-family);

On this page

Monospace

Change a selection to our monospace font stack with .font-monospace.

This is in monospace

<p className="font-monospace">This is in monospace</p>

<p className="font-monospace">This is in monospace</p>

Body

.font-body returns a selection to the body font stack — useful inside .font-monospace blocks or components that set their own face.

Monospace with a body-font span inside

<p className="font-monospace">Monospace with a <span className="font-body">body-font span</span> inside</p>

<p className="font-monospace">Monospace with a <span className="font-body">body-font span</span> inside</p>

Customizing

CSS variables

Both stacks are one token each on :root, so a page can swap a family without recompiling and every class and component reading it follows.

scss

--cui-font-sans-serif: meta.inspect((system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")),
--cui-font-mono: meta.inspect((SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)),

Font family utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss

"font-family": (
  property: font-family,
  class: font,
  values: (
    monospace: var(--cui-font-mono),
    body: var(--cui-body-font-family)
  )
),