# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/adding-local-fonts-to-sveltekit-with-tailwind.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.