geist-svelte

Geist font family for Svelte and SvelteKit. Sans, Mono, and Pixel variants.

Installation

npm i geist-svelte

Compatibility: Svelte 4 / 5 · Tailwind v3 / v4 · SvelteKit · Svelte (Vite)

Quickstart

Importing a font module registers the @font-face rules and CSS variables (for example --font-geist-sans).

SvelteKit + Tailwind v4

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import '../app.css';
  import 'geist-svelte/font/sans';
  import 'geist-svelte/font/mono';
  let { children } = $props();
</script>

{@render children()}

/* src/app.css */
@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

Tailwind v3

Use the same font imports as above, then map variables in tailwind.config.js:

import { fontFamily } from 'tailwindcss/defaultTheme';

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)', ...fontFamily.sans],
        mono: ['var(--font-geist-mono)', ...fontFamily.mono],
      },
    },
  },
};

No Tailwind

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import 'geist-svelte/font/sans';
  import 'geist-svelte/font/mono';
  let { children } = $props();
</script>

{@render children()}

<style>
  :global(body) {
    font-family: var(--font-geist-sans);
  }
  :global(code, pre) {
    font-family: var(--font-geist-mono);
  }
</style>

Svelte (Vite)

// src/main.ts
import 'geist-svelte/font/sans';
import 'geist-svelte/font/mono';

Pixel Variants

| Export | CSS Variable | Description | | -------------------- | ------------------------------- | ------------------------ | | GeistPixelSquare | --font-geist-pixel-square | Square pixel shapes | | GeistPixelGrid | --font-geist-pixel-grid | Grid-based pixel pattern | | GeistPixelCircle | --font-geist-pixel-circle | Circular pixel shapes | | GeistPixelTriangle | --font-geist-pixel-triangle | Triangular pixel shapes | | GeistPixelLine | --font-geist-pixel-line | Line-based pixel pattern |

<script lang="ts">
  import 'geist-svelte/font/pixel';
</script>

CSS Variables

| Import Path | CSS Variable | | ------------------------------------- | -------------------------------- | | geist-svelte/font/sans | --font-geist-sans | | geist-svelte/font/mono | --font-geist-mono | | geist-svelte/font/sans-non-variable | --font-geist-sans-non-variable | | geist-svelte/font/mono-non-variable | --font-geist-mono-non-variable | | geist-svelte/font/pixel | --font-geist-pixel-square | | geist-svelte/font/pixel | --font-geist-pixel-grid | | geist-svelte/font/pixel | --font-geist-pixel-circle | | geist-svelte/font/pixel | --font-geist-pixel-triangle | | geist-svelte/font/pixel | --font-geist-pixel-line |

Non-Variable Fonts

Variable fonts are recommended (smaller). Use non-variable variants only for legacy browser support:

<script lang="ts">
  import 'geist-svelte/font/sans-non-variable';
  import 'geist-svelte/font/mono-non-variable';
</script>

TypeScript API

Use named imports only if you need metadata:

import { GeistSans } from 'geist-svelte/font/sans';

GeistSans.variable;       // '--font-geist-sans'
GeistSans.style.fontFamily; // full font-family string with fallbacks

Troubleshooting

• Fonts not applying: confirm font imports run in your root entry (+layout.svelte or main.ts) and your CSS/Tailwind theme maps the variables.
• Unused import warnings: use side-effect imports (import 'geist-svelte/font/sans';).
• Strict CSP: allow your built asset origin in font-src.

License

The Geist font family is free and open sourced under the SIL Open Font License. This package is licensed under the MIT License.