How to Add Custom Fonts to Your Squarespace Website in 2024 - A Step by Step guide

Imagine spending days finding the perfect font that aligns with your brand, looks great with your colours and images, only to go to add it to your website and find out it’s not available in Squarespace...

Adding custom fonts to your Squarespace website is a great way to elevate it’s look and feel, making it look less template-like. This, in turn, will help your website to stand out from your competitors. That’s what we want after all, right? This guide will walk you through the process of adding custom fonts to your Squarespace site, step-by-step. 

We’ve kindly added in some custom code you’ll need, which you can simply copy, paste and amend.

Step 1: Choose and Download Your Custom Font 

First, you need to get your hands on a custom font to use. Our recommendations are Google Fonts, BeFonts or AdobeFonts (you’ll need a Adobe membership), all of which have a large selection of fonts you can use for free or with a license. Once you have your chosen font, download it. It will typically be in one of the following formats:

• .woff

• .woff2

• .ttf

• .otf 

Step 2: Upload the Font to your Squarespace Website

1. Log into your Squarespace account and open up the website you want to add your custom font to.

2. In the menu on the left-hand side, under Website, select Pages then Website Tools at the bottom, then Custom CSS. Alternatively, on the dashboard, press ‘/‘ on your keyboard and type in ‘Custom CSS’ which will take you straight to it.

3. Open up the Custom Files tab, and click on anywhere in the tab Add Images or Fonts.

4. Locate your font folder, paying attention to upload only the file in one of the formats listed under the previous step. Your custom file is now uploaded to Squarespace!

Step 3: Add Custom CSS (code) 

In this step we are defining your custom font using the ‘@fontface’ rule. Close your Custom Files box and put your cursor in the white textbox, which is your CSS panel. This is where you will add your code.

1. Copy and paste the following code into your CSS panel. 

@font-face {
    font-family: 'YourCustomFont';
    src: url('URL_TO_YOUR_FONT_FILE.woff2') format('woff2'),
         url('URL_TO_YOUR_FONT_FILE.woff') format('woff'),
         url('URL_TO_YOUR_FONT_FILE.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Step 4: Amend Your CSS

Pay attention to the format of the font you uploaded to your Squarespace website. Locate the same format within your CSS. We are using ‘truetype’, which is the third url within our code.

1. In the first line of your code, after ‘font-family’, replace YourCustomFont with the name of the custom font. Do not delete the apostrophes. For us, it’s font-family: ‘Bebas-Neue’;

2. Highlight and delete the URL_TO_YOUR_FONT_FILE text. Ensure the apostrophes either side remain in place. 

3. With your cursor between the apostrophes, open the Custom Files tab and select your custom font.

4. Go back to your CSS panel and the custom font URL should have populated between the apostrophes between the brackets.

Your custom code is declared properly to your Squarespace site.

Step 5: Apply your Custom Font to your Squarespace Website

1. To apply your custom font to headings across your website, copy and paste the following code below the ‘@font-face’ code. 

h1, h2, h3, h4, h5, h6 {
    font-family: 'YourCustomFont';
}

2. Replace YourCustomFont with the name of your custom code. Ensure it is typed the exact same way you wrote it on Step 4.1.

Your custom font is now applied to headings and subheadings across your site! 

Additional Info

If you want to apply the same font to paragraph text on your Squarespace website, copy and paste the following code, which targets paragraph text instead. Don’t forget to replace YourCustomFont with the custom font name.

body, p {
    font-family: 'YourCustomFont', sans-serif;
}

If you want to apply the same font to the items in your header, copy and paste the following code, which targets header items.

.nav-item {
    font-family: 'YourCustomFont', sans-serif;
}

If you want to apply a different font, go through the steps again, uploading your desired font. You can apply this to the headings, paragraph or header items for example, by simply replacing the name of the font after ‘font-family’.

There you have it! You now know how to add custom fonts to your Squarespace website.

Want something a little more bespoke than fonts? Book a call with us to discuss how we can help you build a powerful, attractive site that stands out from your competitors.