How to self-host the Inter font

July 12, 2019
I'm making an alternative to DevTools. Click here to check it out.

Inter is a beautiful, open-source UI font from Rasmus Andersson. Until it’s added to Google Fonts, you can only use it on your website by self-hosting it. In this post, I’ll show you how to self-host the Inter font.

1. Download Inter.

2. 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/.

3. 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 src lines to whereever you put your fonts in Step 2. For instance, if you put your fonts in /assets/fonts/:

/* Before */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url("Inter-Regular.woff2") format("woff2");
}

/* After */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
}

4. 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.

html {
  font-family: "Inter";
}