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.

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

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

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

CSS

You can now use it in your main CSS file.

@layer base {
  * {
    @apply border-border;
  }

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

  ::selection {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-fg) !important;
  }
}

Dark Mode Implementation Icon Componentization

`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()}`

`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`	`}`