| 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",
);