Skip to main content

Font family

Use font-family-<name> to switch the font for a block of text.

This is a simple helper for authors: pick one of the supported font names and apply the class to any element.

Usage​

Choose one of these class names:

  • font-family-inter
  • font-family-recursive
  • font-family-source-serif-4
  • font-family-playfair-display
  • font-family-space-grotesk
  • font-family-nunito
  • font-family-jetbrains-mono
  • font-family-spectral
  • font-family-fraunces

Example​

<h2 class="font-family-playfair-display">A classic headline</h2>
<p class="font-family-inter">Neutral, readable body text.</p>
<p class="font-family-jetbrains-mono">Code-like notes.</p>

Demo​

Inter — Quick brown fox jumps over the lazy dog.
Recursive — Quick brown fox jumps over the lazy dog.
Source Serif 4 — Quick brown fox jumps over the lazy dog.
Playfair Display — Quick brown fox jumps over the lazy dog.
Space Grotesk — Quick brown fox jumps over the lazy dog.
Nunito — Quick brown fox jumps over the lazy dog.
JetBrains Mono — Quick brown fox jumps over the lazy dog.
Spectral — Quick brown fox jumps over the lazy dog.
Fraunces — Quick brown fox jumps over the lazy dog.

How not to use it​

  • Don’t mix several font families inside one paragraph. Pick one for the whole block.
  • Don’t use decorative fonts for long body text. Save them for short headings or callouts.