Typography plays a crucial role in web design and the use of custom fonts can make a website stand out. However, relying on external font services can have both performance implications, as well as privacy concerns concerning GDPR. In this blog post, we'll explore how to self-host a font and use it in a SvelteKit project with TailwindCSS. Here is the link to the repository.

Why self-host a font?

There are a few reasons why one might opt to self-host the fonts in their own application. Some possible scenarios is when the font you use is privately own, performance and reliability of the delivery is a key concern, or perhaps concerns and compliance about the privacy of your site's users.

How to self-host the font in your project

There are several ways you can have the font files. I will be covering two approaches, one using fontsource, and the other using the font files directly from your project.

I will assume you have a sveltekit project already setup with tailwind, but if not, follow the guide at Tailwindcss.

Getting the font (fontsource)

This is the simplest method, it just requires installing the dependency. For this example I am using a font named oxanium. When browsing for a font you might see that there is the base font version and also the variable font version. The optimal to use would be the variable version as it comprises all the variations into a single file instead of several files. In any case both types work.

npm i -D @fontsource-variable/oxanium

Then, in our root +layout.svelte, we have to import it.

Getting the font (font files)

For this approach you need to get the files from whatever source you have. I have downloaded a font named chillax. You will then have to put your fonts ideally in the static/fonts directory. The font files are typically .woff, .woff2 , or .tff file format. You typically need to include many versions for fallback scenarios in case of lack of browser support.

Following, we need a css file that tells the browser about the files, weight, source, and other typography stuff.

We then need to import it in our app.css file.

Make sure that the app.css is included in +layout.svelte.

Setting up the fonts in Tailwind

In our tailwind configuration we need to extend the font family so we are able to the fonts in our site. To add the font as default (supposing we are using sans family), I add the name of the font as first in the array. It is good practice to have the fallback fonts in case there's anything wrong with our font files.

Using the fonts

Now that we have all the setup done, we can freely use the fonts inside our site. Rember that we setup one of the fonts to be used as the default for the sans family, hence no need no specify the font family within the class of an HtmlElement.

Final remarks

Hopefully this post covers all your typical use cases. Self-hosting fonts and using them in conjunction with SvelteKit and Tailwind CSS can provide greater control over your website's performance, privacy, and design. Remember to choose fonts that complement your design and adhere to licensing and usage guidelines.