Sections

Font family

Utilities for controlling the font family of an element.

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

Where $heading_font, $text_font and $code_font are the Heading, Text and Code fonts selected in theme settings.

Usage

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

This is a paragraph with the heading font family applied.

<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.

This is a paragraph with the text font family applied.

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

Use .font-code to apply a web safe monospaced font family.

This is a paragraph with the code font family applied.

<p class="font-code">
  This is a paragraph with the code 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",
);