Dialtone

Font Family

Utilities to change an element's font-family.

CSS Variables

VariableOutput
var(--ff-custom)"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--ff-sans)-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--ff-mono)"RobotoMono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
var(--ff-marketing)"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--ff-marketing-semi-expanded)"ArchivoSemiExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
var(--ff-marketing-expanded)"ArchivoExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Classes

ClassOutput
.d-ff-customfont-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-sansfont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-monofont-family: "RobotoMono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
.d-ff-marketingfont-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-marketing-semi-expandedfont-family: "ArchivoSemiExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-marketing-expandedfont-family: "ArchivoExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-unsetfont-family: unset !important;

Custom

Use d-ff-custom to apply the theme's font-family.

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

Sans-serif

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

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

Mono

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

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

Marketing

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

<p class="d-ff-marketing">...</p>
<p class="d-ff-marketing-semi-expanded">...</p>
<p class="d-ff-marketing-expanded">...</p>
Last Updated: