geist-svelte

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

Installation

npm i geist-svelte

Usage with SvelteKit

GeistSans is exported from geist-svelte/font/sans, GeistMono from geist-svelte/font/mono, and Geist Pixel variants from geist-svelte/font/pixel.

Basic Setup

In your root +layout.svelte:

<script lang="ts">
  import { GeistSans } from 'geist-svelte/font/sans';

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

{@render children()}

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

Using Multiple Fonts

<script lang="ts">
  import { GeistSans } from 'geist-svelte/font/sans';
  import { GeistMono } from '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>

CSS-Only Import

If you don't need the metadata objects, you can import the CSS directly:

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

Pixel Variants

Geist Pixel includes five distinct 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 {
    GeistPixelSquare,
    GeistPixelGrid,
    GeistPixelCircle,
    GeistPixelTriangle,
    GeistPixelLine,
  } from 'geist-svelte/font/pixel';
</script>

With Tailwind CSS

All fonts are available through CSS variables. Import the fonts in your root layout, then configure Tailwind.

Tailwind CSS v4

In your app.css:

@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-pixel-square: var(--font-geist-pixel-square);
  --font-pixel-grid: var(--font-geist-pixel-grid);
  --font-pixel-circle: var(--font-geist-pixel-circle);
  --font-pixel-triangle: var(--font-geist-pixel-triangle);
  --font-pixel-line: var(--font-geist-pixel-line);
}

Tailwind CSS v3

In your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
        'pixel-square': ['var(--font-geist-pixel-square)'],
        'pixel-grid': ['var(--font-geist-pixel-grid)'],
        'pixel-circle': ['var(--font-geist-pixel-circle)'],
        'pixel-triangle': ['var(--font-geist-pixel-triangle)'],
        'pixel-line': ['var(--font-geist-pixel-line)'],
      },
    },
  },
};

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 | | | --font-geist-pixel-grid | | | --font-geist-pixel-circle | | | --font-geist-pixel-triangle | | | --font-geist-pixel-line |

Non-Variable Fonts

Variable fonts (~30kb) are recommended. For browsers that don't support variable fonts, use the non-variable variants (~300kb):

<script lang="ts">
  import { GeistSansNonVariable } from 'geist-svelte/font/sans-non-variable';
  import { GeistMonoNonVariable } from 'geist-svelte/font/mono-non-variable';
</script>

TypeScript API

Each export provides a metadata object:

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

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

License

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

This package is licensed under the MIT License.