Font family

Utilities for controlling the font family of an element.

In this article

Class Properties
.font-heading font-family: $heading_font;
.font-text font-family: $text_font;

Where $heading_font and $text_font are the heading and body text fonts selected in theme settings.

Usage

Use .font-heading to apply the font family selected for headings in the theme settings.

<p class="font-heading">
  This is a paragraph with the heading font family applied.
</p>

Use .font-text to apply the font family selected for body text in the theme settings.

<p class="font-text">
  This is a paragraph with the text font family applied.
</p>

Variants

By default, no responsive or hover-state variants are generated for font family utilities.

Responsive

To include responsive variants like .md:font-heading, add "font-family" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "font-family",
);

Hover-state

To include hover-state variants like .hover:font-heading, add "font-family" to the $hover-variants variable:

$hover-variants: (
  // ...
  "font-family",
);

Questions or feedback about this article? Let us know