### CSS Variables and Tailwind v4 Font families are declared in the `@theme` block of `ontopix.css`. Two roles alias to Tailwind v4 built-in variables: ```css @theme { /* Built-in aliases — set site-wide defaults */ --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif; --font-ui: var(--font-sans); --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; --font-code: var(--font-mono); /* Custom tokens — no built-in equivalent */ --font-prose: 'Literata', ui-serif, Georgia, serif; --font-action: 'Monda', ui-sans-serif, system-ui, sans-serif; } ``` ### Tailwind Font Classes | Role | Class | Built-in | Use Case | |------|-------|----------|----------| | UI | `font-ui` or `font-sans` | `--font-sans` | Site-wide default, no class needed | | Prose | `font-prose` | — | Wrap content areas with this class | | Code | `font-code` or `font-mono` | `--font-mono` | Auto-applied to `

`, `` |
| Action | `font-action` | — | Buttons, CTAs, interactive elements |

```html

Interface text uses Geist Sans automatically



  






code uses Geist Mono
```

### Font Loading

Google Fonts are auto-loaded by `@nuxt/fonts` from the `@theme`
declarations. No manual `` tags or `@font-face` rules needed.
`@nuxt/fonts` also generates size-adjusted fallbacks to prevent
layout shift (FOUT) during font loading.

### Important: CSS Import Order

The `@ontopix/nuxt-layer-ui` layer imports Tailwind CSS and Nuxt UI
via `ontopix.css`. Consumer apps **must not** re-import these in their
own CSS files, as this overrides the layer's `@theme` settings
(including font variables).

```css
/* ❌ WRONG — overrides layer font settings */
@import "tailwindcss";
@import "@nuxt/ui";

/* ✅ CORRECT — layer handles imports, add only app-specific styles */
/* app-specific styles here */
```

### Google Fonts (outside Nuxt)

For non-Nuxt projects, load fonts manually:

```html

```

Type Scale