SvelteKit

To include Fontsource into your Svelte / SvelteKit project and apply it to your application’s typography, follow the steps below.

Installation

First, install your chosen font package:

⬤⬤

npm install @fontsource-variable/inter

⬤⬤

yarn add @fontsource-variable/inter

⬤⬤

pnpm add @fontsource-variable/inter

⬤⬤

bun add @fontsource-variable/inter

1. Layout Import

Import fonts in your root layout for application-wide availability:

⬤⬤

<!-- src/routes/+layout.svelte -->
<script>
  import '@fontsource-variable/inter/wght.css';
</script>

<main>
  <slot />
</main>

<style>
  :global(body) {
    font-family: 'Inter Variable', sans-serif;
    margin: 0;
  }

  :global(h1, h2, h3, h4, h5, h6) {
    font-family: 'Inter Variable', sans-serif;
    font-weight: 600;
  }
</style>

html

2. CSS File Import

Create a global CSS file and import it in your layout:

⬤⬤

/* src/styles/global.css */
@import '@fontsource-variable/inter/wght.css';

body {
  font-family: 'Inter Variable', sans-serif;
  margin: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 600;
}

css

⬤⬤

<!-- src/routes/+layout.svelte -->
<script>
  import '../styles/global.css';
</script>

<main>
  <slot />
</main>

html

3. Component-Level Import

For better code splitting, import fonts in specific components or routes:

⬤⬤

<!-- src/routes/blog/+layout.svelte -->
<script>
  import '@fontsource/playfair-display/700.css';
  import '@fontsource-variable/inter/wght.css';
</script>

<article>
  <slot />
</article>

<style>
  article :global(h1) {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
  }

  article :global(p) {
    font-family: 'Inter Variable', sans-serif;
    font-weight: 400;
  }
</style>

html