Fonts

Thulite recommends hosting fonts in your project with Fontsource.

This keeps font delivery local, predictable, and privacy-friendly.

Recommended setup (Fontsource)#

1. Add a Fontsource package:

   npm install @fontsource-variable/geist

   pnpm add @fontsource-variable/geist

   yarn add @fontsource-variable/geist

   bun add @fontsource-variable/geist

2. Mount the package to static/fonts in config/_default/module.toml:

   [[mounts]]
     source = "node_modules/@fontsource-variable/geist"
     target = "static/fonts/geist"

3. Define @font-face in assets/scss/common/_fonts.scss:

   @font-face {
     font-family: "Geist Variable";
     font-style: normal;
     font-display: swap;
     font-weight: 100 900;
     src: url(fonts/geist/files/geist-latin-wght-normal.woff2) format("woff2-variations");
   }

4. Apply it in assets/scss/common/_variables-custom.scss:

   $font-family-sans-serif:
     "Geist Variable",
     system-ui,
     -apple-system,
     "Segoe UI",
     Roboto,
     "Helvetica Neue",
     Arial,
     sans-serif;

This project already follows this pattern with Geist and Geist Mono.

Learn more#