How to Add Custom Fonts in Squarespace: A 4-Step Guide [2024]
Squarespace has a lot of fonts baked in out-of-the-box, but if you’re working with an already established brand - you’re probably going to want to use their font. You want your new website to look just as good as your other branding materials offline including colors, styling, and typography choice.
This tutorial is perfect if you want to use a font different from the included Adobe fonts provided in Squarespace by default.
With a few simple lines of CSS code (don’t worry, it’s not that scary…), we’ll be able to add any font from your computer in no time!
Step 1: Upload your font to Squarespace.
Once you know which font you want to use, you need to make sure you’ve got the font file ready to go. To do this, you’ll need to find your font file online and download it. FYI: Some fonts may require you to pay to use them!
You may download the font to your computer in either OTF, TTF, or WOFF formats, all work with Squarespace!
To upload the font to Squarespace, log in to your account, open your website, and click on “Website” from the left menu.
Next, scroll down and click “Website Tools” under “Utilities” in the menu.
Inside of the “Website Tools” section, click on “Custom CSS” to access the CSS editor in Squarespace.
Now click the dropdown arrow to open up the “Custom Files” dialogue, click the plus icon over “Add images or fonts”, and select your font desired file from your computer.
Step 2: Selecting your font using CSS code.
Now that we’ve uploaded your font to Squarespace, all we need to do now is add some custom CSS code to apply the font to your site.
In the “Custom CSS” panel, copy and paste these lines of code below:
@font-face {
font-family: ‘NAME’;
src: url(’’);
}
h1, h2, h3, h4, p {
font-family: ’NAME’;
}
Okay, now let’s break down what all of this means.
The sections of the code where we see: font-family: ‘NAME’ is where you’re going to put the name of the font. In our case we’re using the Akira Extended demo font, so i’m just going to enter “Akira” here.
The middle section of the code: src: url(‘’) is where we need to select the font’s URL. To do this, simply click in between the quotation marks, then click the dropdown arrow next to “Custom Files”, and select your font. This will automatically add the correct URL address into this section of the code for you.
The final part of the code defines where in the site you want your font to apply.
In our case, we’d only want to use our big caps bold font on headings and not on tiny paragraphs, so we will remove the ‘p’ which stands for paragraphs.
“h1, h2, h3, h4” refers to the different heading sizes in Squarespace so if you want to change all headings, you can keep this code.
This is a little difficult to get the hang of, but once you’ve got this right, your fonts will be changed across the entire site so hang in there!
Step 3: Styling your fonts (optional).
Now your custom font is uploaded to your Squarespace site, you can add some further customization by editing the CSS code.
a. Change Font Size:
h1 {
font-size: 40px;
}
p {
font-size: 12px;
}
b. Change Font Weight
h2 {
font-weight: bold;
}
h3 {
font-weight: 700;
}
c. Changing Letter Spacing
h4 {
letter-spacing: 2px;
}
p {
letter-spacing: 1px;
}
Don't hesitate to explore these different CSS properties to achieve the look you want for your custom fonts.
Step 4: Save and preview your changes!
After applying all the CSS for your custom fonts, remember to save your changes in the CSS editor.
Next, click the “Preview” button to view your custom font style on your Squarespace website.
If everything looks as expected, congratulations! You have successfully added and styled custom fonts on Squarespace 7.1.
5 benefits of Adding a custom font to your Squarespace site:
1. Bespoke Branding
Custom fonts in Squarespace allow you to create a distinctive look for your website, helping to strengthen your brand identity and make your site memorable to visitors.
2. Enhanced Aesthetics
A well-chosen custom font can significantly improve the visual appeal of your Squarespace website, making it more engaging and visually attractive.
3. Brand Consistency
Using custom fonts ensures consistency across your Squarespace website, aligning with your overall branding and marketing materials, which can help in building a cohesive brand image.
4. Improved User Experience
Custom fonts can enhance readability and navigation, providing a better user experience on your Squarespace site. A font that aligns well with your site's content and design can make it easier for visitors to read and understand your information.
5. Accessibility
Custom fonts can be optimized for better readability, including features like clear letter spacing and distinct character shapes, which can enhance the accessibility of your Squarespace website for users with visual impairments or reading difficulties.
Your users will thank you for adding this.
Congrats! You’ve officially reached the bottom of the article.
Want more tips like this? Join my newsletter below! It’s free, and I won’t spam you.
Your Squarespace Designer
Hi, I’m Nick. I've been designing killer brands and stunning websites for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.
Ready to discuss your project? Book a free 15 min consultation call!
