Custom Fonts in Your Sveltekit Project Using Tailwind

1. Place the font file in the static directory of your SvelteKit project under static/fonts.

2. Add the font to your CSS file (typically src/app.css).

@font-face {
	font-family: 'YourFontName';
	src: url('/fonts/yourfont.woff2') format('woff2');
}

3. Configure Tailwind to use your custom font by extending the theme in your tailwind.config.js.

import { fontFamily } from 'tailwindcss/defaultTheme';
import type { Config } from 'tailwindcss';

const config: Config = {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {
			fontFamily: {
				sans: ['YourFontName', ...fontFamily.sans],
			}
		}
	}
};

export default config;

4. Import your CSS in your layout file (typically src/routes/+layout.svelte).

<script>
	import '../app.css';
</script>