Adding custom fonts to your Squarespace site (7.0 & 7.1)

All CSS tricksCustomization tipsFonts7.07.1Learn code

May 15

So you’ve got your amazing brand all set, you finally decided on your fonts – which is a freaking miracle, tbh – and now you’re starting to design your site on Squarespace. Great!

But hang on, that gorgeous brush script you just chose is not in the editor's font list… crap, now what?

Well, you basically have three options:

Go back to changing your brand to fit Squarespace’s font list – silly right? Sadly I’ve been there and done that. And no, I’m not kidding. Please don’t do this!
Get frustrated thinking how much time you’re going to waste making images out of phrases, only to have them look pixelated half the time, and super tiny on mobile.
Use the @font-face rule.

Heard about it? If not, get ready for this simple life changer.

About @font-face

@font-face is a CSS rule that allows your site to download a font from where it is hosted and use it on your pages. You can think about it as “installing” the font on your website, so anyone can see it without them having to have it on their devices. The process requires adding code to your CSS injection window, but it’s quite simple.

Gathering the files

First, you need to make sure your font is 100% free to use or you have the corresponding license to use it on your site.
Then you need to check what type of file you have by looking at the extension of the font file you downloaded. You’re going to need at least 3: .tff or .otf, .woff, and .woff2. The different file extensions will provide better compatibility with current and old browser versions.
If you have all the files, great! If you don’t, go to Font Squirrel and click on Generator. This tool will help you convert the .ttf or .otf font file you already have into .woff and .woff2. Click on Upload Fonts, select your font file from your downloads folder (the .ttf or .otf), choose Optimal and check the agreement. Click on Download your Kit.

Inside the zip file you’ll find a .woff and .woff2 file, and along with the original font file you should now have 3 or 4 different file extensions.

"Installing" your font

You’ll need to insert some code at the top of your CSS injection window. In Squarespace, go to Design > Custom CSS and paste the following snippet:

@font-face {
  font-family: 'fontname';
  src: url(fontlocation.ttf),
       url(fontlocation.otf),
       url(fontlocation.woff),
       url(fontlocation.woff2);
}

The font-family can be any name you want, but it’s easier if it’s just the name of the font. For this example, the font name will be luna.

Inside the parenthesis preceded by url, you’ll need to add the address where that particular file is located. Thus, you have to upload the files into your site.

In order to do it, click on Manage Files at the very bottom of the Custom CSS window and upload the files. To get the URL where they’ve been saved, you can simply click on the file and it will magically appear inside your Custom CSS window, wherever your cursor is. It’s going to be a very long string of characters with the corresponding extension, so it’s best to first click between empty parentheses and then click the file to paste the URL in place.

Keep in mind that if you’re only uploading three files like in the example below, instead of four URL snippets, you’ll need only three. In this case, the url(fontlocation.otf) has been deleted:

@font-face {
  font-family: 'luna';
  src: url(https://static1.squarespace.com/static/58a369f4440243bebdc81e2c/t/5919ba2b579fb3dea4ffd873/1494858283622/Luna.ttf),
       url(https://static1.squarespace.com/static/58a369f4440243bebdc81e2c/t/5919b9d715d5db3071c6fbdd/1494858199292/luna-webfont.woff),
       url(https://static1.squarespace.com/static/58a369f4440243bebdc81e2c/t/5919b9da15cf7d45e97a5682/1494858203058/luna-webfont.woff2);
}

Using your new font

You can do this in different ways:

If you want to use that font as the default h1, h2 or h3, you can go back to your Custom CSS window and add this snippet:

h1 {
  font-family: 'fontname', 'fallbackfont', genericfont;
}

h1 can be substituted by h2, h3 or even p if you’re looking to change the body text.

Remember to change fontname for the actual font name you used under the @font-face rule (in this case it would be luna), switch fallbackfont for a websafe font and change genericfont for serif or sans-serif depending on what you prefer to be shown if both your font and the websafe font fails to load.

For example:

h1 {
  font-family: 'luna', 'Impact', sans-serif;
}

If you want to use the new font as a different type of headline or text, you can create one on the same Custom CSS window:

h4 {
  font-family: 'fontname', 'fallbackfont', genericfont;
}

This will set the style for a new h4 that can be used anywhere on your site by entering this snippet in a code block:

<h4> Your Text Here </h4>

To change the color and size of your new h4, you'll need to use the color and font-size properties inside the h4 curly brackets you created.

Pro tip: when creating a new heading, like an h4, add all the CSS styling properties in your custom CSS window instead of inside the code block where the h4 is located. This will help you avoid copying and pasting repeated styles wherever you create an h4, and it will make it easier for you to alter its properties in the future in only one place.

Now go, save time and have fun by adding your on-brand fonts to your site!

Until next time,
B.

Full code

/*ADDING CUSTOM FONTS*/
@font-face {
  font-family: 'fontname';
  src: url(fontlocation.ttf),
       url(fontlocation.otf),
       url(fontlocation.woff),
       url(fontlocation.woff2);
}

/*USING THE NEW CUSTOM FONTS*/
h1 {
  font-family: 'luna', 'Impact', sans-serif;
}