How To Add and Upload A Custom Font In Squarespace

UPDATED 2024: Although I wrote this before the days of Squarespace 7.1, it still works just the same. However, you may now want to additionally use h4 (for Heading 4), sqsrte-small (Paragraph 3) and .sqsrte-large (Paragraph 1).

Adding and Using Custom Fonts on Squarespace

If you've spent more than five minutes in the 'online business' world, you'll know already how important it is to use fonts and colours consistently when marketing your brand. So, what are you supposed to do when you spend hours, days, maybe even weeks choosing the fonts that are just-so-perfect for you and your brand (or invest a chunk of change in a brand designer to do it for you) and then get on Squarespace only to find that those fonts are not an option in the Style Editor?

Don't panic. It's fine. You can use any font on Squarespace. It just takes a little CSS tweaking.

To demonstrate, I've gone back to my faithful dummy website... Squarespace has three heading styles as standard (you can add more, but that's for another post, another day!) plus your body and quote text styles. I've used H1, H2, H3 and Body (P) all on the same page here, and labelled each to make it really clear.

Now, head on over in DESIGN >> CUSTOM CSS.

Step 1: Upload Your Chosen Font

Simply scroll down to just below the CSS window and click 'Manage Custom Files'. Then, select the font file you want to upload from your computer and boom... step one complete. If you need to get a copy of the font file, or are still choosing your fonts, FontSquirrel.com is a great source of fonts that are free for commercial use or if you would like a more premium/unique font, I use Creative Market – super affordable (usually >$20USD) – but just a little bit, more, unique. The font I'm using in this tutorial, Manhattan, was purchase on Creative Market. $18. FYI. I bought it because it was a much more refined version of Playfair Display in Caps... but also because, Manhattan has my heart and that just sealed the deal for me. There a coordinating font called Brooklyn, which so far I've managed to resist.

Step Two: Tell Squarespace Where To Find The Font

The next step is to add in a simple bit of CSS. I like to give each section of CSS a heading so that if something stops working or I want to make a change, I'm not scrolling forever trying to find the code I need. I can just glance at the headings until I get to the right place. So In this case, I'll go with... //ADDING MANHATTAN FONT// then the basic CSS underneath...

@font-face {
font-family: 'NAME';
src: url('FONT URL');
}

I'll need to replace 'NAME' with the name I'd like Squarespace to recognise the font by and 'FONT URL' by the URL where the font can be found. I'm going to keep it simple, and call my font MANHATTAN. Let's not overcomplicate things.

@font-face {
font-family: 'MANHATTAN';
src: url('FONT URL');
}

Next, we need to find the URL of your font. I recommend deleteing the words FONT URL and just having your cursor flashing between the two ' '. That's because in a moment, Squarespace is going to insert the URL of your font for you. If your cursor is elsewhere on the page, it'll insert it there instead. Simply click back on 'Manage Custom Files', click on your font file in the list of uploaded files and BOOM. The URL has been automatically inserted!!

Again, I stress the importance of making sure your cursor is in the right place before you click on your font's name in 'Manage Custom Files' ... the URL will end up wherever your cursor is and this has, on more than one occasion, caused me to insert the URL into some CSS that I couldn't see. I kept clicking wondering why nothing was happening, meanwhile CSS that was for something totally unrelated was getting obliterated by me inserting this URL over and over again and when I realised what I was doing **facepalm** I had to go searching and tidy up the mess I'd made. Learn from my mistakes.

I’ve been doing this web design thing for the best part of two decades but we all have to mess up sometimes!

Step Three: Assign Font to the Correct Heading/Style

Finally, having told Squarespace "Hey, this is where the font is and this is what I'd like to call it", we can now say "Oh, and here is how I want to use it".

Decide which heading or text style you'd like to use the custom font for. In most cases, this is a large heading so I'm going to use H1 as an example. You may well want to assign a custom font to h2, h3 or your body or paragraph text, and the process is exactly the same, just replace 'h1' with whatever you'd like.

The code you need is:

h1 {
font-family: 'NAME';
}

in this case:

h1 {
font-family: 'MANHATTAN';
}

Here you're telling Squarespace “I'd like to use Manhattan for my H1 please.” You already told Squarespace where to find the font called Manhattan in the step above, so you should see any H1 on your website change automatically! Congrats!

You've successfully uploaded and used a custom font in Squarespace! Well done!

(Optional) Step Four: Adding Extra Styling

You might want to tweak the appearance of your font a little. You can do that right here too. And if you're starting to feel more confident using CSS, it might be a nice little chance to 'play around'. You can easily delete anything you don't like. For example, you could add:

h1 {font-family: 'MANHATTAN'; 
letter-spacing:'2px';    
font-size:55px;    
text-shadow: 1px 1px purple;  
}

There are a ton of changes you can make to text using CSS, you can find more of them at W3Schools Text CSS page. NOTE TO BRITS: You need to spell colour as color. Like, the American version. FYI, I've been making this mistake and wondering why my code isn't working at least once a week for the last decade.

Video Walkthrough

Check out this video walkthrough of the process. You can also see more clearly how some of the extra style changes affect the text in realtime!

Got a Squarespace SOS?

Unfortunately, I’m no longer able to reply to individual emails asking for CSS assistance or Squarespace troubleshooting due to the dozens of requests I get a week. However, if you’d like something fixing for a small fee as part of my Tech Support service, you can contact me here. You can also discover my full range of Squarespace Web Design Services on my website.