Customise font in TailwindCSS with SvelteKit

Why is font important?

Web Design is 95% Typography Source

The easiest way to elevate your design is to use a good font. In this blog post, we will see how to customise the font in TailwindCSS with SvelteKit. We will use fontsource to import the font and then use it in our TailwindCSS configuration.

Steps

1. Bootstrap a new SvelteKit project

First we bootstrap a new SvelteKit project using the official template.

2. Add tailwindcss

And then we add tailwindcss using svelte-add.

3. Install fontsource font

Head over to fontsource and select the font you want to use. I am going to use Inter for this blog post.

The best thing about fontsource is that it provides you with the exact npm package to install. So, we just need to run the following command to install Inter.

Note: The install command on the fontsource website is variable. Use the static install command.

4. Configure tailwindcss to use the font

4.1. Configure app.pcss

You will need to now import this font in your app.pcss file. You can find this file in src/app.pcss. You will need to add the following lines to this file.

I tried to import the fonts using a single line @import '@fontsource/inter.css'; but it didn't work. So, I had to import each font weight separately.

4.2. Configure tailwind.config.js

Now, we need to tell the tailwind that we want to use the Inter font. We can do this by adding the following lines to tailwind.config.js.

If Inter is not available in the font stack, it will fallback to the default sans font stack.

Make sure that your app.pcss is imported in src/routes/+layout.svelte.

That's it. Now, you can use the Inter font in your SvelteKit project! 🎉

You can find the source code for this blog post here.

Thanks

Thanks a ton to fontsource for making it so easy to use fonts in our projects. Also, thanks to scottspence's blog for helping me figure out how to use fontsource with tailwindcss.

Conclusion

In this blog post, we saw how to customise the font in TailwindCSS with SvelteKit. We leveraged fontsource to import the font and then used it in our TailwindCSS configuration. We also saw how to use the Inter font in our SvelteKit project.

Hope you found this blog post helpful. If you have any questions, feel free to reach out to me on Twitter or LinkedIn. I would love to hear from you!