Self-hosting fonts
If you want to bundle the fonts used in your web application, then Fontsource is a library you might want to take a look at (link also in addendum at the end of the page). It allows you install the fonts you want to consume, which means that your fonts are hosted by yourself and don't require a CDN to load.
Installing each font
To install the fonts you want to use, simply run the install-command for each variant. The following code snippets shows how the font for this PWA would be installed.
npm install @fontsource/work-sans
In the entry point of my application, I then have to consume the installed package by importing it. This allows me to precisely define what I need without adding any overhead. As fonts can be quite large in size, this is great opportunity to save Bytes.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Finally, I need to set the font family in my CSS. Depending on the library you are using (for example Tailwind.css), this code might look a little different for you.
body {
font-family: "Work Sans", sans-serif;
}
Variable fonts
Fontsource also provides an option to install variable fonts, which means you have access to the latest tooling when it comes to font loading. Please note that not all fonts are available as variable variants.
