# 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 1 · Edge 12 · Firefox 1 · Safari 1

| Class | Properties | Value |
|-------|------------|-------|
| `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](/docs/normalize#document).

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `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` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `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` |

## Custom Fonts

Add a font stack in `theme.fonts` & use it by name. A name that matches a built-in family (`d`, `m`, `s`) replaces it.

```mjs title="yumma.config.mjs" mark={4-7}
import { defineConfig } from "yummacss";

export default defineConfig({
  theme: {
    fonts: {
      display: '"Esteban", serif',
    },
  },
});
```

```tsx "ff:display"
<h1 className="ff:display fs:3xl">Documents</h1>
```