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>