Elements logo

Font family

Utilities for controlling the font family of an element

Class reference

ClassProperties
font-sansfont-family: Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
font-seriffont-family: Georgia, Cambria, "Times New Roman", Times, serif
font-monofont-family: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
font-displayfont-family: "Magistral", Roboto, sans-serif

Display

Use .font-display to apply Magistral to top-level headings:

I'm a sans-serif paragraph.

<p class="font-display uppercase tracking-widest ...">I'm a sans-serif paragraph.</p>
When using the .font-display it should coupled with .uppercase and a tracking of .tracking-wider or greater.

Sans-serif

Use .font-sans to apply a Roboto:

I'm a sans-serif paragraph.

<p class="font-sans ...">I'm a sans-serif paragraph.</p>

Serif

Use .font-serif to apply a web safe serif font family:

I'm a serif paragraph.

<p class="font-serif ...">I'm a sans-serif paragraph.</p>

Monospaced

Use .font-mono to apply our monospaced font family ‘Roboto Mono’:

I'm a monospaced paragraph.

<p class="font-mono ...">I'm a sans-serif paragraph.</p>

Responsive

To control the font family of an element at a specific breakpoint, add a {screen}: prefix to any existing font family utility class. For example, use md:font-serif to apply the font-serif utility at only medium screen sizes and above.

<p class="font-sans **md:font-serif**">
  <!-- ... -->
</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.