Inter is a beautiful, open-source UI font from Rasmus Andersson. Its normal style is available on Google Fonts, but the italicized versions aren’t yet. In this post, I’ll show you how to self-host the font so you can use all of its styles.
Unzip the download, and open the Inter (web) folder. You’ll see files for all of Inter’s styles. Drag these into a public folder on your own site – for instance, I put mine in /assets/fonts/.
In the Inter (web) folder, find inter.css. Paste its contents above the rest of your CSS, and change the path for each of the
srclines to whereever you put your fonts in Step 2. For instance, if you put your fonts in /assets/fonts/:
/* Before */
src: url("Inter-Regular.woff2") format("woff2");
/* After */
src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
- Now, you’re ready to use Inter. You can simply assign it via
font-family. You may want to add some fallbacks, as well – system fonts would be my pick.