GitHub Repo
Codepen Template
Getting Started Design Utilities Components

Font Family

Utilities to change an element's font-family.

CSS Variables

Variable Output
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

Class Output
.d-ff-custom font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-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 font-family: "RobotoMono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
.d-ff-marketing font-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-expanded font-family: "ArchivoSemiExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-marketing-expanded font-family: "ArchivoExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
.d-ff-unset font-family: unset !important;

Custom

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

Sans-serif

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

Mono

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

Marketing

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