> For the complete documentation index, see [llms.txt](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/adding-local-fonts-to-sveltekit-with-tailwind.md).

# Adding Local Fonts to SvelteKit with Tailwind

To add **WOFF2** fonts to a SvelteKit project using TailwindCSS, you can follow these steps:

### **1. Download and Place the Font Files**

First, download your WOFF2 font files and place them in a directory within your project. A common practice is to place them in the `lib` or `src` directory.

For this example, let's place them in the `src/lib/fonts` directory:

```html
src/lib/fonts/YourFont.woff2
```

### **2. Define the Font in CSS**

Create a CSS file or use an existing one to define the `@font-face` rule. This will tell the browser where to find the font files and how to use them.

For example, create a file named `global.css` in the `src` directory and add the following code:

```css
@layer base {
  @font-face {
    font-family: 'YourFont';
    font-style: normal;
    font-weight: 400;
    src: url('$lib/fonts/YourFont.woff2') format('woff2');
  }
}
```

### **3. Import the CSS in Svelte**

Ensure that your CSS file is imported in your Svelte components. Typically, you would import it in the `+layout.svelte` file to make the font available globally:

```html
<script>
  import '../global.css';
</script>
<slot />
```

### **4. Configure TailwindCSS**

Update your `tailwind.config.js` file to include your custom font. You can either replace the default font family or extend the existing configuration.

**Option 1: Replace the Default Font**

```js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    fontFamily: {
      sans: ["YourFont", 'sans-serif'],
    },
    extend: {},
  },
  plugins: [],
};
```

**Option 2: Add as an Extended Font**

```js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        custom: ["YourFont", 'sans-serif'],
      },
    },
  },
  plugins: [],
};
```

### **5. Use the Custom Font in Your Components**

Now, you can use the custom font in your Svelte components by applying the corresponding TailwindCSS class.

For example, in a Svelte component:

```html
<div class="font-custom">
  <h1 class="text-5xl">Hello, World!</h1>
</div>
```

Or, if you replaced the default font:

```html
<div class="font-sans">
  <h1 class="text-5xl">Hello, World!</h1>
</div>
```