How to Add a Custom Font to Squarespace: The Easy Way 2025
Squarespace offers a range of fonts for you to choose from, to help you create a website design that stands out.
However, what do you do if you want to use a custom font that Squarespace doesn't offer by default?
For example, let's say you've bought a custom font from a website like Creative Market, and you want to use it on your site.
Can you upload fonts to Squarespace? Yes you can!
You can do this two ways— the first way is adding your fonts natively in Squarespace, the second is by using CSS code.
Let’s take a look at both options.
Before you begin
You will need a font file for both options.
This needs to have either an .OTF, .TFF, or .WOFF extension.
Option 1: Uploading your custom fonts natively in Squarespace
In fall 2025, Squarespace launched a brand new way to add custom fonts to Squarespace, meaning you can upload your own bespoke font in just a couple of clicks!
This option is only available for Circle Gold and Platinum Partners at the moment, but we expect it to be rolled out to more users in the future.
Step 1: Access site styles
You can do this by going to any page, and clicking the paintbrush icon in the top-right corner of the page.
Select Fonts.
Step 2: Upload your font
Click on a specific font and you’ll uncover a mini menu. Click on the upload icon in the top-right of this menu.
This will open the Uploaded Fonts menu. You can drag and drop your files here to upload them, as well as manage your existing uploaded fonts.
And that’s all there is to it—super easy!
Bear in mind that Squarespace is currently road-testing this feature, so it may change slightly in the future.
Option 2: Using CSS code
If you’re not a Circle Gold or Platinum Partner, you can use CSS code to add the font of your choice to Squarespace.
The good news is that this process works for both versions of Squarespace. This means you can add custom fonts to Squarespace 7.1 and 7.0! You can easily find out which version of Squarespace you’re running by checking your settings.
Here's how to add a custom font to Squarespace using CSS code in 4 quick steps:
Step 1: Upload your font file
To upload your font file to Squarespace, open the Squarespace dashboard and select your site.
Click Website, then scroll down to click Website Tools, and lastly Custom CSS. Then, scroll down to the bottom and click Manage Custom Files. You can then upload your font file of choice.
Step 2: Add the CSS code
Next, copy and paste the following text into the box:
@font-face {
font-family: FONTNAME;
src: url();
}
Replace FONTNAME with the name you want to use to refer to the font in Squarespace. This doesn't have to be the actual name of the custom font you downloaded; however I'd recommend using it to keep things simple.
Next, you need to add the URL of the custom font in between the brackets. The easiest way to do this is to click between the brackets and choose your font from the Manage Custom Files menu. This will automatically add the URL into your code.
Step 3: Add your custom font
The final step is to tell Squarespace where you want to use your custom font.
For example, if you want to make it the default body text or use it as a heading.
You need to add the following code into the CSS box
WHEREYOUWANTTOUSEFONT {
font-family: 'FONTNAME';
}
For FONTNAME, use the name of the font you added in the previous step.
For WHEREYOUWANTOTUSEFONT, use one of the following:
Heading 1: h1
Heading 2: h2
Heading 3: h3
Heading 4: h4
Paragraph 1: .sqsrte-large
Paragraph 2: p
Paragraph 3: .sqsrte-small
Here’s an example of how it can look like:
h2 {
font-family: 'Arial';
}
If you want to use one font for multiple text styles, then separate by comas like this: h2, h3, p. And you're done, now you know how to add custom fonts to Squarespace!
Step 4: Style your custom font
We’ve shown you how to add a custom font to your Squarespace site using CSS, but did you know you can add a little extra code to style it even further?
Just go back to Website > Website Tools > Custom CSS and make the tweaks you need.
h2 {
font-family: 'Arial';
letter-spacing: '2px';Â Â Â
font-size: 22px;
font-color: #333fe2;
font-weight: bold;
}
In the example above we’re changing the…
letter spacing to 2px
font size to 22px
font color to #333fe2
font weight to bold
How to style your new font to your liking
Now let me guide you through 14 stylish ways to make the most of your newly added custom fonts on Squarespace, whether you're aiming for elegance, boldness, or something uniquely you.
1. Text animation effects
Bring your fonts to life! Add fun and engaging animations to your custom fonts in Squarespace. From subtle movements to eye-catching effects, these animations will captivate your visitors.
2. Animated gradient font style
Add a touch of color and motion! This gradient text style lets you blend multiple colors in a smooth gradient, creating a dynamic and modern look for your fonts.
3. Font design toolkit
Spark Plugin is the perfect choice if you want to enhance the way your custom fonts look in Squarespace 7.1, without using code.
With Spark Plugin, you get over 100 customizations to make your website stand out. Whether you want to edit your custom fonts, images or text, this tool has everything you need.
4. Vertical text
Stand out with a twist! Rotated text can be a creative way to present headings or key phrases, offering a unique layout that breaks the monotony of horizontal text.
5. Reveal text on hover
With this Squarespace hover effect, text remains hidden until the user hovers over a specific area, making it perfect for interactive websites or to create an element of surprise.
6. Outlined text style
Define your words with impact! Outlined text creates a bold and distinct look, making your words pop out, especially effective for headers or important call-to-actions.
7. Font size adjuster
While you can use custom CSS code to change the size of your brand-new font (keep reading to find out how), there is an easier way.
Spark Plugin’s font size adjuster means you can toggle the size of your headings and paragraph text in just a few clicks, without relying on code.
Plus, you can even adjust the size of your text on mobile and desktop independently, ensuring it stays legible across all devices.
8. Squarespace font settings
If you’re not a fan of using CSS to tweak your brand-new font, you can style your Squarespace custom font in the font settings.
Do this in Design > Site Styles > Fonts. Alternatively, you can click the paintbrush icon in the top-right corner of every page to access the SITE STYLES menu.
9. Attention-seeking custom fonts
When you add custom font to Squarespace, it’s all about making your words not just speak but shout, whisper, or even dance on the page!
Whether it's for your calls to action, standout quotes, or key headings, these attention-seeking animations will help you do exactly that.
10. Candy cane text style
Sweeten your website with a festive touch!
This custom Squarespace text style mimics the classic candy cane stripes, perfect for seasonal promotions or to add a playful vibe to your site.
11. Change opacity on any font
There's something incredibly elegant about text that knows how to play with visibility.
Adjusting the opacity of your custom fonts can create a subtle hierarchy of information, guiding your visitors' eyes from the most to the least important elements seamlessly.
It's like your text is whispering secrets, and who doesn't want to lean in closer to a whisper? This technique is perfect for backgrounds, overlay text on images, or creating a modern, minimalist look.
12. Marker text styles
This text style simulates the appearance of marker-written text, adding a personal and artistic flair to your website.
13. Hovering text effect
This hover animation can make navigating your site feel more like an exploration and draw attention to your custom fonts.
14. Add custom fonts to a carousel
Imagine using the feature to add custom font to Squarespace not just for static text, but as a dynamic component of your website's carousel.
By incorporating your unique typefaces into Squarespace carousel headers or captions, you create a interface that grabs attention.
Good to know after uploading custom fonts to Squarespace
The right combination of fonts can make a massive difference to the look and feel of your site.
If you'd like to know more about how to make the most of typography in Squarespace, here are a few helpful tips:
Stick to a maximum of three different fonts
Any more than this, and your site can start to look messy.
Depending on the size of your fonts, your website may even load more slowly
Use fonts from the same family
This makes for a clean, simple, aligned style.
For example, try Helvetica Black and Helvetica Narrow
Try pairing two different types of fonts together
This makes for an eye-catching, impactful look.
For example, a serif heading and a sans-serif paragraph text
Make sure your custom font is easy to read
This is especially important on mobile.
That script font may look striking, but if web users can't read it; they're going to leave your site
Ensure adequate color contrast
Good color contrast between your text and background is vital for accessibility and ADA compliance.
Find out more about color contrast and making your website accessible
Experiment with the space between letters
This can transform a standard font into one that is unique to your brand.
So have fun, and don't be afraid to try something new!
I hope you found this guide to adding custom fonts to Squarespace 7.1 and 7.0 useful.
With a little bit of experimentation, you can create stunning typography that makes your website stand out and encourages your customers to stick around!
