Font Family

Set the font family for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

ff-d
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
ff-m
font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Roboto Mono, Ubuntu Mono, Consolas, Liberation Mono, Courier New, monospace;
ff-s
font-family: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
Yumma CSS uses the Default as a default font family. Learn more about it in the docs.

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:ff-*
Small≥640px
md:ff-*
Medium≥768px
lg:ff-*
Large≥1024px
xxl:ff-*
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:ff-*