Lightweight font management for SvelteKit.
Register local fonts and inject @font-face styles — no <svelte:head>, no manual CSS, no flash of unstyled text.
npm install @kiiimatz/flux1. Place your font files in static/fonts/
static/
└── fonts/
└── inter.woff2
2. Add createHandle to hooks.server.ts
// src/hooks.server.ts
import { createHandle } from "@kiiimatz/flux/hooks";
export const handle = createHandle([
{ class: "inter", font: "/fonts/inter.woff2" },
]);3. Use your font in CSS or Tailwind
/* CSS */
.inter { font-family: "inter", sans-serif; }<!-- Tailwind / class -->
<p class="inter">Hello World!</p>That's it. Works on SSR and SSG with zero flash of unstyled text.
Omit class to apply the font to body:
createHandle([
{ font: "/fonts/inter.woff2" }
])createHandle([
{ class: "inter", font: "/fonts/inter.woff2" },
{ class: "mono", font: "/fonts/jetbrains.woff2" },
{ class: "display", font: "/fonts/cal-sans.woff2" },
])createHandle([
{
class: "inter",
font: ["/fonts/inter.woff2", "/fonts/inter.woff", "/fonts/inter.ttf"],
},
])createHandle([
{ class: "inter", font: "/fonts/inter-bold.woff2", weight: 700 },
{ class: "inter", font: "/fonts/inter-regular.woff2", weight: 400 },
])// src/hooks.server.ts
import { createHandle } from "@kiiimatz/flux/hooks";
import { sequence } from "@sveltejs/kit/hooks";
export const handle = sequence(
createHandle([{ class: "inter", font: "/fonts/inter.woff2" }]),
myHandle
);Creates a SvelteKit handle hook that injects font styles into every SSR/SSG response.
Font CSS is built once at module load time — no timing issues, no FOUT.
| Property | Type | Default | Description |
|---|---|---|---|
font |
string | string[] |
— | Path(s) to the font file, relative to /static |
class |
string |
— | CSS class name. Omit to apply to body |
weight |
string | number |
"normal" |
Font weight |
style |
string |
"normal" |
Font style |
display |
FontDisplay |
"swap" |
@font-face font-display value |
fallback |
string |
"sans-serif" |
Fallback font family |
woff2 · woff · ttf · otf · eot · svg
createHandle generates @font-face declarations from your config at module load time and stores the CSS in memory. On every request, the handle hook injects the CSS and <link rel="preload"> tags into <head> before the response is sent — ensuring fonts are available on the very first render in both SSR and SSG.