Font Family

Utilities to change an element's font-family.

Sans-Serif

Use d-ff-sans to apply a Sans-Serif font stack.

<p class="d-ff-sans">...</p>

Use d-ff-mono to apply a Monospace font stack.

<p class="d-ff-mono">...</p>

Dialtone supports select marketing fonts and weights. Use the following combinations to apply the marketing font stack.

<p class="d-ff-marketing">...</p>

Variable	Output
var(--ff-custom)	-apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
var(--ff-sans)	-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--ff-mono)	"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
var(--ff-marketing)	"Season Mix", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--ff-marketing-semi-expanded)	"Season Mix", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--ff-marketing-expanded)	"Season Mix", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Class	Output
.d-ff-custom	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
.d-ff-sans	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-mono	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
.d-ff-marketing	font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-marketing-semi-expanded	font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-marketing-expanded	font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-unset	font-family: unset !important;