How to Add a Custom Font to Squarespace (2024 Update)
Squarespace offers a range of fonts for you to choose from, to help you create a website design that stands out. You can check out some of my favorite Squarespace fonts.
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! The good news is that you can upload any custom font to your Squarespace website using CSS.
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 in 4 quick steps:
Step 1: Upload your font file
The first step is to upload your font file to Squarespace. Bear in mind that you can only upload font files with a .OTF, .TFF, or .WOFF extension to Squarespace.
To do this, 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 the 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. 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.
8. Squarespace font settings
If you’re looking for a free way, it's best to style your Squarespace custom font in the font settings where you can, just as it's easier than using CSS.
Do this in Design > Site Styles > Fonts
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. Style your custom fonts with CSS
If you want to edit your Squarespace custom fonts in CSS, here’s an example of what you can do:
h2 {
font-family: 'Arial';
letter-spacing: '2px';
font-size: 22px;
font-color: #333fe2;
font-weight: bold;
}In this example we’re changing the…
letter spacing to 2px
font size to 22px
font color to #333fe2
font weight to bold
14. Hovering text effect
This hover animation can make navigating your site feel more like an exploration and draw attention to your custom fonts.
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
An easy way to style the fonts on your Squarespace website is to use fonts from the same family. For example, Helvetica Black and Helvetica Narrow
Try pairing two different types of fonts together to provide maximum impact. For example, a serif heading and a sans-serif paragraph text
Make sure your custom font is easy to read in Squarespace, especially on mobile. That script font may look striking, but if web users can't read it; they're going to leave your site
Changing the color of your custom fonts is a great way to make your text stand out, but make sure you have adequate color contrast between your text and your background. This contrast checker will help you see if your color combination is 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!
