How to add a custom font to your Squarespace 7.1 site

Squarespace 7.1 ships with a solid font library, but if your brand uses a specific typeface, "close enough" isn't close enough. The good news: uploading a custom font takes about ten minutes and three short snippets of CSS. This guide covers the whole process: where to get fonts, which file formats work, and the exact code to activate them.

Prefer to watch?

The core snippet from the video:

@font-face {
  font-family: "Custom Font";
  src: url("{YOUR-FONT-URL}.woff2") format("woff2"),
       url("{YOUR-FONT-URL}.woff") format("woff");
}

Before you upload: files and licensing

Squarespace accepts font files in .otf, .ttf and .woff formats. WOFF is the web-native format, a compressed version of the other two that loads faster. If your font only came as .otf or .ttf, either upload that directly or run it through a converter to get a WOFF version.

On licensing: a font is software, and using it on your website needs a web license. If you bought a desktop license for your logo work, that usually doesn't cover web use, so check before you upload. If the font will be your brand's official typeface everywhere, buy both.

Good places to find fonts worth paying for:

• CoType Foundry
• Swiss Typefaces
• Klim Type Foundry
• Pangram Pangram
• Colophon Foundry
• Google Fonts: free, and many of them are excellent

When choosing, readability beats personality. A characterful display font is fine for headings, but if body text is hard to read on a phone, visitors leave. Two typefaces per site is plenty.

Step 1: Upload the font file

In your Squarespace dashboard, go to Pages → Website Tools → Custom CSS. Scroll down to Custom Files and upload your font file. Files upload one at a time; bulk upload won't work.

Step 2: Register it with @font-face

In the Custom CSS editor, add:

@font-face {
  font-family: 'YourFontName';
  src: url();
}

Replace YourFontName with whatever you want to call the font (using the file's actual name makes life easier). Then click between the brackets of url() and select your uploaded file from Manage Custom Files, and Squarespace inserts the file's URL for you. You'll end up with something like:

@font-face {
  font-family: 'Circular';
  src: url(https://static1.squarespace.com/.../circular.woff2);
}

Step 3: Apply it

Squarespace 7.1 gives every text style a selector you can target:

• Heading 1–4: h1, h2, h3, h4
• Paragraph 1 (large): .sqsrte-large
• Paragraph 2 (normal): p
• Paragraph 3 (small): .sqsrte-small

Apply your font to whichever you like:

h1, h2, h3 {
  font-family: 'Circular';
}

That's it. Save, and your headings render in the new font.

Fine-tuning the typography

Once the font is in, the usual styling controls still live in the normal place: Design → Fonts handles size, weight and line height per text style, and Design → Colors handles colour per theme. A few pointers from the sites we build:

• Line height is the setting most DIY sites get wrong; body text usually wants somewhere around 1.6–1.8em.
• Weight does the hierarchy work. If everything is bold, nothing is.
• Effects like gradient text, hover reveals and animated headings are all possible with additional CSS. Used sparingly they lift a site, used everywhere they bury it.