Adding Custom Fonts to Squarespace

Squarespace is one of the best website design tools available. You'll find a huge range of fonts from Google Fonts and Adobe Typekit already included as part of your monthly fees. So many in fact that they aren't all initially listed in the Style Editor.

How to search for a font in Style Editor

If you know the name of a font you'd like to use, try searching for it - you may be pleasantly surprised to find that it already exists!

Custom Fonts

However, there are times where you may want to use your font. Perhaps it's a font that forms part of your company branding, or there's a quirky font you like that isn't built in but you can obtain a free licence to use it on one of the popular font-sharing sites. Either way you can add a third-party font, it isn't immediately obvious how to do it, and Squarespace don't document it. Here's our guide.

Font Format

The font file type is really important. If you've already purchased your font, you'll have a folder of files such as ttf, woff2, woff and eot. If you haven't obtained them yet, ensure you look for the webfonts, not the desktop fonts or you'll have compatibility issues with some browsers.

In this example, I'm using Comic Relief. It's a free webfont that is ideal for Primary (Elementary) School websites because the letters appear as children write them, not like a printed typeface. If you download the same font you'll have the following files:

ComicRelief-webfont.eot
ComicRelief-webfont.svg* 
ComicRelief-webfont.tf
ComicRelief-webfont.woff

*svg files cannot be added to the Squarespace custom files area.

Uploading the Fonts to Squarespace

Log in to your Squarespace site and from the home menu, click Design then Custom CSS.

 

Scroll down the Custom CSS page until you see an almost hidden Manage Custom Files button. 

Click the button and then the Add images or fonts button that slides up (see above).

Add each file one by one - the eot, ttf and woff. As mentioned above, you won't be able to add an svg file because Squarespace don't allow this type of file in the Custom Files area.

 

Adding Custom CSS

Once we've added the files, we need to add a little bit of code to allow the site to use them.

Click on the first font name in the list of custom files. As you click this you'll see the file's URL appear in the Custom CSS box above.

Repeat for each font file you've uploaded. 

You'll now see a list of URLs, but they will be jumbled. Add some line breaks at the end of each link so each one is on its own line. For example, mine now look like this:

Delete the "http:" at the start of each line so that each line starts with "//".

Paste the code below into the top of the CSS editor, above the URLs.

@font-face { 
  font-family: '??'; src: url('???'), url('???'), url('???');
  font-weight: ????;
}

Replace "??" with the name you want to assign to this font. I'm naming mine "ComicRelief".

Replace each "???" with each URL of each font file. 

Replace "????" with a number to indicate how heavy you want the font to appear. Normally this is 300, 400 or 500.

You should now something that looks like this but your URLs and names will be different:

Once you save this CSS, the fonts are now loaded into your website! However, they won't appear in the Style Editor. You'll need to add some CSS to use them. How you do this will depend on how you want to use the font. For example, if you want all your H1 or H3 headers to use this font, you can add a line of CSS to tell your site to do this. On the other hand you may only want to use it in one small area. The best way to do this is to add some CSS to create a class and then use this in a Makrdown Block.

Using Your Custom Font for H1 Headers

If you'd like all your H1 headers to use the custom font, paste the following code into the CSS Editor. Remember to change "ComicRelief" to the name you chose!

h1 {
  font-family: 'ComicRelief'
}

Using Your Custom Font for H3Headers

If you'd like your H3 headers to use the custom font instead, paste the following code into the CSS Editor:

h3 {
  font-family: 'ComicRelief'
}

Using your Custom Font in Markdown Blocks or Code Blocks

Add the following CSS to create a class that uses your custom font:

.myCustomFont {
    font-family: 'ComicRelief';
    font-size: 22px;
  }

Add a Markdown or Code Block with something like this:

<div class='myCustomFont'>This is in my Custom Font
</div>

Thats it! You've added a custom font to your Squarespace website.