How to upload and use custom fonts in SquareSpace

Why custom fonts?

Sometimes you might want to upload and use your own font to Squarespace. It might be a custom font that’s not available in SquareSpace font library and other font-serving sites.

Or you need this for legal reasons: in Germany the court declared Google Fonts to be not GDPR compatible. So you want fonts to be served from your site directly, not from Google Fonts servers.

Also, Google Fonts implementation on SquareSpace make site slower in PageSpeed insights (Typekit, interestingly enough, is ok).

Get the font(s)

In our example, we’ll use an open-source font from Collletttivo (Mazius).

In the end, we’ll need a file in .woff2 format. If you have woff2 files in your package or archive, great. If not, see the next step.

⚠️ While you can download directly from Google Fonts, there is a helpful tool that already has ready-for-web Google fonts.

⚠️ Even if you purchased the font and have its files, it doesn’t mean you can use it on the web. Most type foundries / shops have separate Desktop and Web licenses. So check the license you need or consult with the representative of the font shop.

Convert the font to .woff2 format if needed

If your font package doesn’t woff2 files, you need to create with Font Squirell Webfont Generator. Upload needed font weights and click Download Your Kit.

Upload font to SquareSpace

Now we need to upload fonts to Squarespace. Go to Pages › Website Tools › Custom CSS and scroll down to Manage Custom Files. Click Add Images and fonts and upload font files there. We’ll only upload .woff2 files

Add font families in CSS

Once the files are uploaded, we need to apply font to site in CSS.

Font Squirell kits come with a default CSS, but we’ll need to replace the urls and remove woff part (it was needed to support IE11 browser which is now dead).

Delete url, place the caret (blinking keyboard cursor) there and click on the corresponding file in the file list:

Example code:

@font-face {
    font-family: 'mazius_displayregular';
    src: url('https://static1.squarespace.com/static/65e9bd90104f586b0a5aba22/t/65f04ba3fba3c958977a1c95/1710246819610/maziusdisplay-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

Repeat for all other font files. Only declare the families you need, so if you don’t use italics, don’t declare it here.

Apply to selectors

Now we can use font-family in CSS.

If you have only one font, you can apply to everything like this.

* {
    font-family: mazius_displayregular !important;
}

But that’s probably not a case.

Let’s see how we could be more specific. Let’s say we only wanted to apply bold version for headers, and regular for content.

⚠️ Since bold families are separate font files & families, we can’t just use bold in CSS, but rather a separate bold font-family.

h1, h2, h3, h4, h5  {
    font-family: mazius_displaybold !important;
}

p {
  font-family: mazius_displayregular !important;
}

Reset fonts in SquareSpace so it doesn’t affect the speed

If you’re not going to use SquareSpace fonts, we need to make sure that its fonts are not loaded. Most likely Squarespace already loads some fonts from Google Fonts or Adobe Fonts and that will:

1. make site load longer
2. GDPR-wise it doesn’t solve the problem we were trying to fix

So we need to remove that fonts. Go to Site Styles → Fonts, and make all fonts to be Arial or Georgia.