Big Update for Fall 2025!

Option 1 (Best!): Directly & Natively Adding and Using Custom Fonts on Squarespace Using Squarespace’s New Built-In Font Uploader Tool

You can now upload custom fonts to your Squarespace website directly in Squarespace’s fonts panel, without needing to use Custom CSS Code. The CSS method is still useful in some circumstances, so I will leave the tutorial below – but in the vast majority of cases, uploading directly through the Font Panel, will be the easiest and best option.

To upload and use a custom font on Squarespace, you will need the font file(s). If you would like to use the font in both italics and regular style, or in different weights (different levels of bold-ness or thin-ness), you’ll need multiple font files. If you purchase a font from somewhere like Creative Market, a file for each weight and style will likely be included.

Step One: Navigate to the Fonts Panel

The first step is to navigate to the Fonts Panel in the Site Styles Panel. You can get here by heading to Website > Site Styles in the main menu, or by clicking the small paint brush icon in the top right-hand corner of the Squarespace editor. Once you’re there, you want to go into your Headings, Paragraphs, Buttons, etc panel – it’s most convenient to choose whichever of the font styles you’re looking to replace with a custom font, but you can upload all your fonts at once and then go into the relevant panels to assign them to different areas on your site.

Custom fonts are most often used for Headings, so that’s what I’ll show here!

Step Two: Upload Your Font File(s)

After entering the Headings panel, click on the font currently being used. A panel will appear for me to select a new font. To the right of the search bar, there is now a new upload icon, click on there and you’ll see a box to drag and drop your new files. You should drop all the font files you wish you use – this may include multiple weights, and normal and italic versions. Once they are all uploaded, you can click the back arrow. Warning: You should only use font files that you have rights to. This means you have either purchased the font files, or they are free to use. If you have a website designer or branding designer, you can check with them for clarification around this.

Step Three: Use Your New Custom Fonts!

Once you navigate back out of the Upload window, you’ll see your newly uploaded fonts listed. You can now select which font you’d like to use. In this case, I replaced Playfair Display with a custom font called Eighties Comeback.

Once you’ve selected the font, you’ll be able to change the size, spacing, weight and line height – all the font variables you’re used to – as normal. If you selected the custom font for ‘Headings’ you’ll see it used everywhere you are currently using a Heading font.

Pretty cool, huh?

If you’d like to assign the new custom font for Paragraphs, Buttons, or Micellaneous text, you can click into those panels and now select the previously-uploaded font in the same way you would choose any of the built in fonts.

If you’d like further assistance with your Squarespace website, I‘m available for hire by the day or half day. You can also purchase a premium Squarespace template for a ready-to-launch design, or even have me build a custom Squarespace website for you from scratch.

Option 2: Adding and Using Custom Fonts on Squarespace Using CSS

UPDATE 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).

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 One: 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 of CSS Font Upload

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 to give your website a 4-8 hours of a Squarespace Expert’s undivided attention, you might be interested in my Design Day service. You can also discover my custom Squarespace website design packages and Squarespace web design portfolio on my website.

NEW 2025: How To Add and Upload A Custom Font In Squarespace