app _ mvp

How to Add Custom Fonts in SvelteKit with TailwindCSS

Need help with Svelte?

Book a complimentary 15-minute call, and I'll analyze your code base and provide you with individualized feedback.

Schedule a Call

Adding custom fonts to SvelteKit is vital for making your application look great.

In this guide, I'll walk you through setting up custom fonts using TailwindCSS, covering both Google Fonts API and self-hosting options.

Let's get started!

Step 1: Install SvelteKit with TailwindCSS

Make sure you have the latest versions of Node and NPM installed on your system. To quickly get coding with a pre-configured workspace, start with a blank template on Github Codespaces.

  1. Create a new SvelteKit (typescript skeleton) project:
npm create svelte@latest custom-fonts
cd custom-fonts
npm install
  1. Install TailwindCSS and its peer dependencies:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. Modify tailwind.config.js to add the template file paths:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {}
	},
	plugins: []
};
  1. Create a ./src/app.css file and add the TailwindCSS directives:
/* src/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Create a base SvelteKit layout file at ./src/routes/+layout.svelte. Import the ./src/app.css stylesheet to apply the TailwindCSS styles:
<!-- src/routes/+layout.svelte -->
<script lang="ts">
    import "../app.css";
</script>

<slot />

Great work! You can verify that TailwindCSS was configured correctly by starting the dev server (npm run dev) and navigating to http://localhost:5173 in your browser.

Step 2: Add Custom Fonts

There are two options for adding custom fonts to SvelteKit: using the Google Fonts API or self-hosting fonts. The Google Fonts API is quick, great for local development, and minimizes configuration time. Self-hosting is a bit more complex but provides increased performance and faster loading times.

Using Google Fonts API

  1. Choose a Font: Choose a custom font from Google Fonts. For this example, we'll use the popular Inter font. Copy the embed code and add it in the <head> of the ./src/app.html file:
<!-- src/app.html -->
<head>
    <!-- ...Head content... -->

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
</head>

Self-Hosting Google Fonts

  1. Download the Font: Go to google-webfonts-helper and select your font and styles (e.g., Inter Regular 400 and Inter Bold 700). Create a new ./static/fonts directory in your project. Download the font files and extract them into the ./static/fonts directory.

  2. Define Font-Face in CSS: In the Copy CSS section of google-webfonts-helper, select Modern Browsers and set the folder prefix to /fonts. Copy the provided CSS code. Open your ./src/app.css file and paste the copied CSS:

/* src/app.css */

/* ...CSS content...*/

@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/inter-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  1. (Optional) Preload the Font: For better performance, preload the self-hosted font by adding <link> tags to the <head> section of your ./src/app.html file:
<!-- src/app.html -->
<head>
    <!-- Preload Font -->
    <link
        rel="preload"
        href="/fonts/inter-v13-latin-regular.woff2"
        as="font"
        type="font/woff2"
        crossorigin
    />
    <link
        rel="preload"
        href="/fonts/inter-v13-latin-700.woff2"
        as="font"
        type="font/woff2"
        crossorigin
    />

    <!-- ...Head content... -->
</head>

Step 3: TailwindCSS Configuration

Last step! Update your TailwindCSS config so that it knows how to apply your custom font.

Option 1: Replace the Default Font

Replace the default sans font family with your custom font. Update the theme section in your tailwind.config.js file:

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

Option 2: Add as an Extended Font

Add your custom font as an extended font family without replacing the default fonts. Update the theme.extend section in your tailwind.config.js file:

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

Apply your custom font with the font-custom class:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
    import "../app.css";
</script>

<div class="font-custom">
    <slot />
</div>

Wrapping Up

That's all there is to it! You can now easily integrate custom fonts into your SvelteKit project.

Need help with Svelte?

Book a complimentary 15-minute call, and I'll analyze your code base and provide you with individualized feedback.

Schedule a Call