How To Add A Custom Font in Squarespace

There are a few different ways to add fonts in Squarespace.  

Right out of the box you can use your choice of any free font available on Google, which is fabulously useful.

Bonus Tip: There are so. many. fonts. available from Google that I always start by going to www.fonts.google.com and using the filters to narrow down and choose my font, then I just search for it in the Squarespace dropdown font list. This is way easier than trying to scroll through all the options in a dropdown box.

 You can also connect your paid Adobe Typekit subscription, which covers a ton of other options.

 But what do you do if you have a specific font you want to use, say a font that’s included in your branding, and it’s not available on Squarespace automatically?

 You add a custom font! It’s actually not that hard, and after answering this question several times online recently I thought a quick how-to on adding custom fonts to your site might be overdue.

Let’s jump right in.

Downloading The Font

I won’t go super in depth on where to find good fonts because that’s a whole post in itself (makes mental note to actually make that a whole post…) and for the purposes of this tutorial I’m going to assume you already know which font you plan to use.  

So, before you even open Squarespace you’ll want to download your font and have a license for it that specifically says it’s okay to use it on the web. Don’t assume that because you downloaded a free font somewhere it’s okay to use it on your site, because it may not be. Most of the time the download page will have some information about how you can use the font… make sure you read that! 

Uploading The Font To Your Site

The font you downloaded most likely came in a .ZIP file, so extract that. Since I collect a ton of fonts I keep all of mine in a folder labeled Fonts, inside my Graphic Goodies folder. If you don’t have a Graphic Goodies folder just make sure to save it somewhere easy to find.

Now look in the contents for a font file. It will probably end in .OTF or .TTF. These are common file formats for fonts you'll find online.  

Once you’ve located your font files, open up your Squarespace site dashboard. From the main menu click on Design, then Custom CSS.  

At the very bottom of the sidebar, underneath the CSS editor, you should see a button that says Manage Custom Files. Click that, click Add Images or Fonts, then find the font file and upload it.

The Code That Brings It All Together 

Yep, I said code. Don’t freak though, I swear it’s not bad! If you can cut and paste you can do this. (That's Ctrl + C and Ctrl + V if you're on a PC or CMD + C and CMD + V on a Mac btw...)

Once your font file is uploaded, copy the code below and paste it into the CSS Editor on your site, making sure to replace font_name with the name of the font you’re using.  

@font-face {
    font-family: 'font_name';
    src: url('fonturl.ttf');
}

Now highlight and delete font_url.ttf, but make sure to leave the single quotation marks around it.

With your cursor between those quotes, click on Manage Custom Files again, then click the filename of the font you just uploaded. This should put the URL of the font where your cursor was. You may have to click inside the editor again for the Manage Custom Files popup to go away.

Using the Font

That last bit of code told the site that there was a new font in play, but it didn’t actually tell anything to use it. So now let’s change your H1 heading to your new font.

Copy the code below and place it underneath the section we just added in the CSS editor. Make sure you swap out font_name for the same name you used in the first code.

h1 {
    font-family: font_name;
}

Make sure to save your changes, and then you’re done!  

By the way, you can use this same basic code to change the font on your paragraphs, quotes, or other heading sizes, you’ll just need to change the h1 to p, blockquote, h2, h3, or h4. I’m only using h1 as an example.

There are other options you may be able to change for your font as well, like changing the size or bolding it. The example below shows a few simple changes you could make.

h1 {
    font-family: font_name;
    font-size: 30px;
    font-weight: bold;
    color: #444444;
    text-transform: uppercase;
}


p.s. If you’re in the middle of DIYing your site I have a course you might LOVE. I walk you through building your own Squarespace site from start to finish, including the workflow I use on my own client’s sites! Check it out here.