How to Use the Inter Font Family on Your Squarespace Website

Introduction

The Inter typeface ↗ is a pleasure to read on a computer screen. Designed by Rasmus Andersson ↗ specifically for digital screens, this typeface has been optimized for legibility and readability, making it easy on the eyes during extended reading sessions. The characters are well-proportioned and spaced, creating a comfortable reading experience even at smaller font sizes. Additionally, the seamless design of the letters ensures that there are no distractions that could hamper the user's comprehension of the text. All these aspects combined make Inter a great choice for anyone looking to improve their reading experience on a computer screen, and has made Inter my top choice for web.

Inter is a free and open source ↗ font family, which means you are free to use this font in almost any way imaginable. You can download it and use it for stuff on your computer or if you’re making a web thing, just paste a snippet into the HEAD of your web page and you’re using it on your website. Pretty great!

Inter is a typeface carefully crafted & designed for computer screens. Sample glyph panel: https://rsms.me/inter/samples/

Inter includes all nine weights – from thin to black – each with italic counterparts, making a total of 18 styles. https://rsms.me/inter/#weights

---

Using Inter on a website

Rasmus provides a very simple snippet of code to apply Inter to your web things, and if you’re building a static website it will work great – and only takes a few seconds to implement. The first part goes in your document HEAD, and the second part is to be included in your stylesheet.

I’ve pasted the default code snippet here for reference:

<!-- HTML in your document's head -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

/* CSS */
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}

---

Setting up Inter on Squarespace

Even though Inter is free to use, and it’s even available in Google Fonts, it’s still not available as a choice in your Squarespace Site Styles. So, if you want to use it, you’ll need to do some work to set it up.

Squarespace works a little differently than a static website, as a dynamic system generates web pages on the fly and renders them on load. For that reason (and some others) linking an external stylesheet (<link rel=””>) will not work in Squarespace, as it will be excluded from the “roll-up” that builds all the styles for the page. Not to worry, I figured it out and it works great—you’re reading this article set in Inter and I’m on Squarespace.

We still use the external stylesheet, but in a way that works in Squarespace. We also need to increase the specificity of our CSS to ensure the styles will apply everywhere we want but nowhere we don’t.

Here is the code snippet you need, and you’ll paste this in its entirety into the Header Code Injection area.

<!-- Squarespace header code injection for Inter -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<style type="text/css">
  @import url('https://rsms.me/inter/inter.css');
  :root > body * { font-family: 'Inter', sans-serif !important; }
  @supports (font-variation-settings: normal) {
    :root > body * {
      font-family: 'Inter var', sans-serif !important;
    }
  }
</style>
<!-- end -->

---

Clean up old fonts (Squarespace 7.0)

To optimize your fonts, I highly recommend unlinking any previously selected fonts from your Site Styles. If they are still specified, Squarespace will continue download those web fonts even though you don’t want to use them. Navigate to Site Styles (Design -> Site Styles) and scroll all the way to the bottom. There, you’ll see a “Set All to System Fonts” button. Clicking that will disconnect any previous web fonts and set it to a system default like Times New Roman. That way, nothing is unnecessarily downloaded wasting precious page speed.

In Squarespace 7.1, simply change your font pack to use a system font like Helvetica.

Site Styles: Set All to System Fonts