Setup

Typography Integration

Seamlessly blend text styles into your design.

Guide

Choose Font

Visit Fontsource for fonts.

Install Package

For this example, we will use Nunito Sans.

npm install @fontsource-variable/nunito-sans

Import the Font

Import the font in your root layout.

1
<script lang="ts">
2
  import '../app.css';
3
  import '@fontsource-variable/nunito-sans';
4
  import { ModeWatcher } from 'mode-watcher';
5

6
  let { children } = $props();
7
</script>
8

9
<ModeWatcher defaultMode="system" />
10
{@render children()}

CSS

You can now use it in your main CSS file.

1
@layer base {
2
  * {
3
    @apply border-border;
4
  }
5

6
  body {
7
    @apply bg-bg text-fg;
8
    font-family: 'Nunito Sans Variable', sans-serif;
9
  }
10

11
  ::selection {
12
    background-color: var(--color-primary) !important;
13
    color: var(--color-primary-fg) !important;
14
  }
15
}

Share treats:

Copyright © 2025 - Cliemtor Fabros