Font Family

Utility classes for controlling an element's font-family.

Variables

Dialtone provides Less and CSS variables for font-family. These are useful if you're writing custom CSS and an immutable class isn't required or desired.

Type CSS Var Less Var Deprecated Less Var Output
Custom var(--ff-custom) @ff-custom @font-family--custom "Mark Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Sans-Serif var(--ff-sans) @ff-sans @font-family--sans -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Mono var(--ff-mono) @ff-mono @font-family--mono "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
Inherit N/A N/A N/A inherit
Unset N/A N/A N/A unset

Classes

Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.

Class Deprecated Class Output
.d-ff-custom .d-font-family--custom font-family: "Mark Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-sans .d-font-family--sans font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-mono .d-font-family--mono font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
.d-ff-inherit .d-font-family--inherit font-family: inherit !important;
.d-ff-unset N/A font-family: unset !important;
.d-ff-custom

This is a paragraph using a Custom font-family.

.d-ff-sans

This is a paragraph using a Sans-Serif font-family.

.d-ff-mono

This is a paragraph using a Mono font-family.

.d-ff-inherit

This paragraph's font-family has been reset using Inherit.

.d-ff-unset

This paragraph's font-family has been reset using Unset.

<p class="d-ff-custom"></p>
<p class="d-ff-sans"></p>
<p class="d-ff-mono"></p>
<p class="d-ff-inherit"></p>
<p class="d-ff-unset"></p>