# SvelteKit [#sveltekit]

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

## Installation [#installation]

First, install your chosen font package:

```sh
npm install @fontsource-variable/inter
yarn add @fontsource-variable/inter
pnpm add @fontsource-variable/inter
bun add @fontsource-variable/inter
```

## 1. Layout Import [#1-layout-import]

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

```html
<!-- 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>
```

## 2. CSS File Import [#2-css-file-import]

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

```css
/* 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;
}
```

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

<main>
  <slot />
</main>
```

## 3. Component-Level Import [#3-component-level-import]

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

```html
<!-- 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>
```