Font Family
Utilities for controlling the font family of an element.
| Class | Properties |
|---|---|
| font-b24-system | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
| font-b24-system-mono | font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; |
| font-b24-primary | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
| font-b24-secondary | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
| font-b24-helvetica | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| font-b24-opensans | font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; |
| font-b24-roboto | font-family: Roboto, "Helvetica Neue", Helvetica, Arial, monospace; |
| font-b24-roboto-mono | font-family: "Roboto Mono", "Helvetica Neue", Helvetica, Arial, sans-serif; |
| font-b24-montserrat | font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; |
| font-b24-comforter-brush | font-family: "Comforter Brush"; |
Setting the font family
You can control the typeface of text using the font family utilities.
In most cases you will use font-b24-system, font-b24-system-mono or font-b24-helvetica.
html
<p class="font-b24-system ...">The quick brown fox ...</p>
<p class="font-b24-system-mono ...">The quick brown fox ...</p>
<p class="font-b24-helvetica ...">The quick brown fox ...</p>Local font family
The use of local fonts is described on the page Local Font Family