How to Add Custom Script Fonts in Squarespace 7.1
Me: *Googling how to upload a custom script font to my Squarespace website*
Google: “Here’s a whole page of tutorial blogs to walk you through the process!”
Me: “Yes!!!”
All the tutorial blogs: “Here’s how to do it in two easy steps! By the way, this only works for Squarespace 7.0!”
I’m guessing you’re here because you’re going through the same thing I went through. You’ve got a beautiful, handwritten script font that you’re dying to use on your website. You try to add it but it just isn’t working, so you settle for typing your headings into Canva and uploading them to your website as images. This works for a while, but what if you need to make changes down the road? It can get super time-consuming.
On Squarespace 7.0, there were several different (easy) ways to add a custom font to your website; however, it’s a bit more complicated on 7.1 - but it’s not impossible! We just need a little bit of CSS.
First, pick a font you want to use and gather all your files.
Haven’t found the perfect font for your brand yet? I love browsing the script fonts on Creative Market. I also purchased an amazing front bundle recently by Wilde Mae Studio, so check them out too!
You’ll need three files of your font in order to successfully add it to Squarespace and have it show up across all browsers:
.ttf or .otf
.woff
.woff2
Most fonts you buy only come with the .ttf or .otf files, so don’t worry if you don’t have the others! You can generate your web fonts with FontSquirrel’s handy Webfont Generator tool!
Once you’ve gathered up all your font files, let’s move onto the next step.
Upload Your Custom Font Files to Squarespace
Go to your Squarespace website and click Design > Custom CSS. Scroll down to the bottom and click the button that says Manage Custom Files, and then click the arrow to upload your font files!
Now, let’s add some CSS!
Copy and paste this code and add it in the box under Design > Custom CSS.
@font-face {
font-family: 'your-font-name';
src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2);
}Replace the font-family value with your font name. Then, add in your specific URLs. You can do this by highlighting the text between the parentheses (URL.ttf/.otf) and then clicking on the correct font file in your Manage Custom files window. When you do that, you’ll see your font file URL pasted in the correct spot!
For an example, here’s the exact code I added for my custom script font on my website:
@font-face {
font-family: 'xo babe';
src: url(https://static1.squarespace.com/static/5ef509399ef3402a74d
e4724/t/5ef92d6ce6aaf04d0e25dbb5/1593388396390/xoBabe-Regular.ttf),
url(https://static1.squarespace.com/static/5ef509399ef3402a74de4724/
t/5ef9359627513553d35044bc/1593390487176/xobabe-regular-webfont.woff),
url(https://static1.squarespace.com/static/5ef509399ef3402a74de4724
/t/5ef935b240b8240f648610d9/1593390514091/xobabe-regular-webfont.woff2);
}You’re almost done! Now you need to assign your new font to one of your headings!
You’ve successfully added your new font to your Squarespace website - yay! You’re just one tiny step away from making it show up on your website. All you have to do now is use CSS to assign your font to one (or more) of your heading styles. Squarespace gives you four different heading styles to choose from (h1, h2, h3, and h4). You can choose one to be your script font, or you can use it for all your headings if you want to!
Here’s the code that I used to make my h2 show up as my script font:
h2 {
font-family: xo babe;
}If you want to change the size of your font, you can’t do that in the site styles - but you can add in a little line of code to change the size:
font-size: 100px;
So now, the whole snippet of code should resemble this (with your custom font family and font size, of course):
h2 {
font-family: xo babe;
font-size: 100px;
}And there you go! You did it! I know trying to figure something out like this can be frustrating, but doesn’t it feel amazing when you finally get it to work? Yay for you, friend!
