Sans-Serif #
Use d-ff-sans to apply a Sans-Serif font stack.
<p class="d-ff-sans">The quick brown fox jumps over the lazy dog.</p>
Mono #
Use d-ff-mono to apply a Monospace font stack.
<p class="d-ff-mono">The quick brown fox jumps over the lazy dog.</p>
Marketing #
Dialtone supports select marketing fonts and weights. Use the following combinations to apply the marketing font stack.
<p class="d-ff-marketing">The quick brown fox jumps over the lazy dog.</p>
CSS Variables #
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" |
Classes #
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; |