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:

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:

@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:

<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

// 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

// 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:

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

Or, if you replaced the default font:

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