Font Family
Controls the font family of an element.
Utility | Properties |
---|---|
ff-c | font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; |
ff-m | font-family: Nimbus Mono PS", "Courier New", monospace; |
ff-s | font-family: system_ui, sans_serif; |
Charter
This example sets the font family to Charter. If Charter is not available, it will fall back to Cambria, and then to a generic serif font.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white ff-c fs-lg p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p></div>
UI Monospace
This example sets the font family to ui-monospace. If ui-monospace is not available, it will fall back to Consolas, and then to a generic monospace font.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white ff-m fs-lg p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p></div>
System UI
This example sets the font family to system-ui. If system-ui is not available, it will fall back to a generic sans-serif font.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white ff-s fs-lg p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p></div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
You can combine responsive breakpoints like sm:ff-*
,md:ff-*
, lg:ff-*
, and xxl:ff-*
allows targeting specific utilities in different viewports.
<div class="ff-s md:ff-m ..."></div>
Alternatively, you can apply :hover
by using h:ff-*
utility to override elements and change their values when hovering over them.
<div class="ff-s h:ff-m ..."></div>