Using a variable font in Sveltekit

Task

I needed to use this font Outfit for a small project.

Download

Downloaded the font and extracted its content into the static folder in my SvelteKit project. I decided to nest it further in another folder called fonts just to keep the static resources contextually grouped.

Add font face

Now in the main app.css I added the following.

@font-face {
	font-family: 'Outfit';
	src: url('/fonts/Outfit/Outfit-VariableFont_wght.ttf') format('woff2') tech('variations'),
		url('/fonts/Outfit/Outfit-VariableFont_wght.ttf') format('woff2-variations');
	font-weight: 100 1000;
}

There are two src inputs for the browser to handle the import of the font. The first line is to follow the future syntax that will eventually be in browsers [1]. The second line is for browsers that are still supporting the deprecated method of defining variable fonts [2].

Resources

[1] https://web.dev/variable-fonts/

[2] https://css-tricks.com/newsletter/259-how-to-use-variable-fonts/