Code for the blog post 'Self-hosting a font and using it with Sveltekit and Tailwindcss'

+layout.svelte

<script lang="ts">
	import '../app.css';
	import '@fontsource-variable/oxanium';
</script>

<slot />

+page.svelte

<h1>Look at the cool font I am using as default 🔥🔥🔥 </h1>
<p class="font-chillax">I am using yet another font</p>

app.css

@import url('/fonts/chillax.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

chillax.css

@font-face {
	font-family: 'Chillax';
	src: url('/fonts/Chillax-Extralight.woff2') format('woff2'),
		url('/fonts/Chillax-Extralight.woff') format('woff');
	font-weight: 200;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Chillax';
	src: url('/fonts/Chillax-Light.woff2') format('woff2'),
		url('/fonts/Chillax-Light.woff') format('woff');
	font-weight: 300;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Chillax';
	src: url('/fonts/Chillax-Regular.woff2') format('woff2'),
		url('/fonts/Chillax-Regular.woff') format('woff');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Chillax';
	src: url('/fonts/Chillax-Medium.woff2') format('woff2'),
		url('/fonts/Chillax-Medium.woff') format('woff');
	font-weight: 500;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Chillax';
	src: url('/fonts/Chillax-Semibold.woff2') format('woff2'),
		url('/fonts/Chillax-Semibold.woff') format('woff');
	font-weight: 600;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Chillax';
	src: url('/fonts/Chillax-Bold.woff2') format('woff2'),
		url('/fonts/Chillax-Bold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],

	theme: {
		extend: {
			fontFamily: {
				sans: ['Oxanium Variable', ...defaultTheme.fontFamily.sans],
				chillax: ['Chillax']
			}
		}
	},
	plugins: []
};