How to Upload a Custom Font to Squarespace (7.0 & 7.1)
Let’s be real, Squarespace has a huge selection of beautiful and free fonts available for you to use on your website, and we love them for that! But, do they have the stunning font that you purchased from Creative Market and used throughout all of your branding and social media graphics?
Chances are the answer is nope!
So that leaves you with three options:
1. Don’t use your brand font on your website - just go with something similar. (How important is brand consistency anyway? 😬)
2. Create graphics in your brand font and then upload those as an image every time you want to use the font on your website (shouldn’t be too annoying to update later on, right? 😅).
3. Upload your brand font directly to your Squarespace site and set it to be your Headings or Paragraph text so that you can use it easily and whenever you like.
Hopefully you see the clear winner here! So, let’s get into exactly how you can upload your custom font directly to your Squarespace website, what you can customize with it, and where you can find gorgeous font options for your brand
A couple of disclaimers before we start:
This tutorial does involve a little bit of coding, but don’t worry! It’s basically just a copy and paste method. Super easy.
You need to make sure that you have the correct licensing on your font so that you are legally able to use it on your website! If you can’t find the details, it’s usually always best to email the font seller platform or font creator and ask. Better to be safe than sorry (aka, fined!).
There's option in this tutorial for both Squarespace 7.0 and 7.1!
Okay, now let’s dive in!
Step One: Prepare your Font Files for Web Use
This is not as scary as it sounds, promise!
When you download your font, it will most likely come in a .TTF or .OTF format. If it has, that’s great! That’s almost all that you need.
But, if you want to be super prepared and smart about it, there are a couple of other file types that would be good to have as well. This will just ensure that your font is compatible over a range of different browsers (basically to cover all of those people still using Internet Explorer, yes, it still exists guys…).
Ideally, you’ll have 3 versions of your font:
.TTF or .OTF
.WOFF
.WOFF2
Luckily for us, our friends over at FontSquirrel have made getting these versions practically impossible to mess up! Click here to access the Webfont Generator, upload either your .TTF or .OTF and it will create a .WOFF and a .WOFF2 for you. Easy as that.
Save all of these in a safe place and move onto step 2!
Step Two: Upload your Font
It’s super easy to get your custom font uploaded to your Squarespace site, but the steps are a little bit different for 7.0 and 7.1 (Not sure which Squarespace version you're using? This is how to find out). Follow the steps for your version below!
Uploading to Version 7.1
Start by heading into the backend of your website. In your main sidebar under Website, click on Pages.
Scroll to the bottom of your Pages Panel and click Custom Code > Custom CSS.
At the top of the CSS Window, you’ll see a Custom Files option.
Click this option and you’ll see a little pop-up window that says “Add Images or Fonts”. This is where you’ll upload those three font files (.TTF/.OTF, .WOFF, .WOFF2)!
Uploading to Version 7.0
Start by heading into the backend of your website. In your main sidebar under Website, click on Pages.
Scroll to the bottom of your Pages Panel and click on Website Tools > Custom CSS.
At the bottom of the CSS Window, you’ll see a Manage Custom Files option.
Click this option and you’ll see a pop-up window that says “Add Images of Fonts”. This is where you’ll upload those three font files (.TTF/.OTF, .WOFF, .WOFF2)!
Step Three: Adding your Fonts with CSS
Once uploaded, your fonts should look something like this:
Now you just need to add a bit of code in the Custom CSS Window that allows you to actually use your font anywhere on your website!
First, copy and paste this code into the Custom CSS Window:
@font-face {
font-family: 'font-name';
src: url(fontURL.ttf/.otf), url(fontURL.woff), url(fontURL.woff2);
}Then, change ‘font-name’ to the name of your specific font. In this example, we would change the name to Botanica. This is so that you can reference it later!
Next you’ll need to update the font URLs for each of your three file types. To do this, first delete the placeholder URL for each type. For example: url(fontURL.ttf/.otf) → url( ).
You’ll then want to paste in each URL by again clicking on Custom Files (7.1) or Manage Custom Files (7.0) and then directly clicking on each font file. As soon as you click on a file, the URL will automatically be pasted within the Custom CSS Window, so it’s helpful to have your cursor clicked in between the correct brackets to avoid having to re-copy and re-paste a bunch of times.
Your code should look something like this:
Be sure to hit Save in the top left hand corner, and you’ve just successfully added your new font!
Important: You’re not quite done yet! Read the next step to see how you actually apply the font throughout your site.
Step Four: Assigning your Font to a Specific Text Style
So you have your new font loaded into your site, but how do you actually use it?!
Unfortunately, just uploading your font into the Custom CSS Window doesn’t mean that it will show up as a font option in your Site Styles (that would be lovely though!).
You’ll have to assign your font to a specific style, and there are two ways to do this:
Using the "Root" (7.1 only) or
Using "Selectors"
Using the Root is the quickest and most simple way to change fonts in bulk across your website (ex: ALL Headings or ALL Buttons), while Selectors allow you to get really specific about where you’re using your font (ex: only Heading 2 or only Blog Post Titles).
Read on for the nitty gritty on each!
Option 1 (7.1 only): Assign Your Font Using Root
Note: This code is for Squarespace 7.1 only! For 7.0, use the selector option below. (Not sure which Squarespace version you're using? This is how to find out).
If you want to make some general changes to your website by customizing ALL of a certain type of text, targeting the Root Element allows you to do just that!
This code is perfect if you want all of your text elements to have the same custom font, but don’t want to worry about inputting a dozen different selectors.
All you need to do is copy and paste the following pieces of code into your Custom CSS Window to change ALL of your Heading, Body, Button, or Miscellaneous text.
Important! Don’t forget to replace font-name with the name of your font that was set previously. If you don’t do this, your custom font won’t show up.
All Heading Text:
:root{
--heading-font-font-family:'font-name' !important;
}All Body Text:
:root{
--body-font-font-family:'font-name' !important;
}All Button Text:
:root{
--primary-button-font-font-family: 'font-name' !important;
--secondary-button-font-font-family: 'font-name' !important;
--tertiary-button-font-font-family: 'font-name' !important;
}All Miscellaneous Text:
:root{
--meta-font-font-family: 'font-name' !important;
}From here, you can actually use the Site Styles to assign specific text items across your site (ex: main navigation, portfolio titles, etc.) your new custom font.
Navigate to your Site Styles by clicking the Paintbrush icon in the top right corner of your site and click into the Fonts tab.
From here, navigate to the Assign Styles tab.
In the Assign Style panel, locate any text element that you'd like to customize and click on it to access its individual style settings. For this example, we'll choose Site Navigation.
Once you've done that, click on the "Style" dropdown at the very top.
Change the Style to Miscellaneous, Heading or Paragraph and the custom font you coded in will now automatically populate for that specific text element!
You can do this for any text element that you want to adopt your custom font! This is a really easy and quick way to assign specific text elements without having to code in all of the specific selectors.
However, while you'll find options for almost every text style, there might be some specific things missing, and you might still need to code in some selectors—which you can learn how to do below!
Option 2: (7.1 and 7.0) Assign Your Font Using Selectors
Now let's get into specifics by using Selectors to target individual categories of text around your website!
To customize specific Heading or Paragraph text styles, paste this code into the Custom CSS Window (below your font code from before):
h1 {
font-family: 'font-name';
}Important! Don’t forget to replace font-name with the name of your font that was set previously. If you don’t do this, your custom font won’t show up.
Pasting the above code into the Custom CSS Window will change your H1 (Heading 1) text to your custom font, regardless of what you have it set at within your Site Styles.
If you want to change the styling of your font (font size, letter spacing, etc.), you can actually still do this within your Site Style settings! Click the Paintbrush icon in the top right corner of your screen, navigate to the Fonts tab and then customize your fonts from there. All of the settings will still work, the font will just be different.
You can use the same exact code to change the font for your other headings and/or paragraph text. Just replace “h1” with a different Selector! See below for the full list of basic text Selectors:
h1 = Heading 1
h2 = Heading 2
h3 = Heading 3
h4 = Heading 4 (only available in Squarespace 7.1)
p = All Paragraph Text
p.sqsrte-large = Paragraph 1 / Large Paragraph (only available in Squarespace 7.1)
p.sqsrte.small = Paragraph 3 / Small Paragraph (only available in Squarespace 7.1)
You can also have fun with this and customize other text elements throughout your website like buttons, blog post titles, and more. See below for some other Selectors that might come in handy!
Selectors for Squarespace 7.1
Site Title Font:
.header-title-text {
font-family: 'font-name' !important;
}Header Navigation Font:
.header-nav *, nav.header-menu-nav-list * {
font-family: 'font-name' !important;
}Primary Button Font:
.sqs-button-element--primary {
font-family: 'font-name' !important;
}Secondary Button Font:
.sqs-button-element--secondary {
font-family: 'font-name' !important;
}Tertiary Button Font:
.sqs-button-element--tertiary {
font-family: 'font-name' !important;
}Form Fonts:
div.form-block * {
font-family: 'font-name' !important;
}Summary Block Title:
.summary-title {
font-family: 'font-name' !important;
}Blog Post Title:
Change the Title Font for all posts on the Blog Overview Page:
.blog-title {
font-family: 'font-name' !important;
}Change the Title Font on all Individual Blog Post Pages:
.entry-title {
font-family: 'font-name' !important;
}Selectors for Squarespace 7.0
Site Title Font:
.Header-branding {
font-family: 'font-name' !important;
}Header Navigation Font:
.Header-nav-item {
font-family: 'font-name' !important;
}Medium Button Font:
.sqs-button-element--primary {
font-family: 'font-name' !important;
}Large Button Font:
.sqs-button-element--secondary {
font-family: 'font-name' !important;
}Small Button Font:
.sqs-button-element--tertiary {
font-family: 'font-name' !important;
}Form Fonts:
div.form-block * {
font-family: 'font-name' !important;
}Summary Block Title:
.summary-title {
font-family: 'font-name' !important;
}Blog Post Title:
Change the Title Font for all posts on the Blog Overview Page:
.summary-title-link {
font-family: 'font-name' !important;
}Change the Title Font on all Individual Post Pages:
h1.BlogItem-title {
font-family: 'font-name' !important;
}Creating New Selectors With Code Blocks
There might be a situation where you don’t want your custom font to replace one of your existing Heading fonts (eg: if you want to upload an extra accent font to compliment the fonts you’re already using from Squarespace).
Maybe you want to use your custom font throughout your site, but also don’t want to lose access to your existing Headings.
The easiest thing to do in this case is to create your own selector!
You can replace the h1 selector with “h5” or something else unique that isn't used anywhere else around your site. Eg:
h5 {
font-family: 'font-name';
}Squarespace doesn’t automatically have a Heading 5 option built-in, so h5 can be a good option. This means that you’re actually creating a whole new Heading.
The biggest difference with this method is that you have to type your text within a Code Block as opposed to a regular Text Block, since you won’t find a Heading 5 option there.
First, add your custom font code to the Custom CSS Window (see above).
Then, on your page while editing, you can add a Code Block wherever you want to use your new font! Just click to add a regular block and choose “Code”.
Within the Code Block field, type in your text and add <h5> tags (or whatever selector you have decided to use) around whatever it is that you add. For example:
<h5> Place your text right here <h5>
Now you'll see the new font on your page.
Another thing to note is that if you’re using this method and want to change the font settings (size, line height, etc.), you won’t be able to change them in your Site Styles, since Heading 5 isn't an option within Squarespace.
The good thing is that you can still change them within the Custom CSS window by adding these unique settings to your code:
h5 {
font-family: 'font-name';
font-weight: 700;
font-size: 16px;
font-style: italic;
text-transform: lowercase;
letter-spacing: 0.5em;
line-height: 1.5em;
}Paste this code into your Custom CSS Window and play around with the different settings until you find something you’re happy with! You can adjust or remove different lines depending on if you want them or not.
Where to Find Custom Fonts
Okay, so now that you know exactly how to get your font added to your Squarespace website (and how to implement it using some code), let’s talk about where you can go to find the best custom fonts!
Here are our favorite places to find both free and paid fonts that will elevate your brand and leave a lasting impression on your website visitors.
Creative Market
Creative Market is a design marketplace with one of the biggest premium font offerings around. You can browse all different kinds of font styles and aesthetics (seriously, they have everything) and find options of all price ranges.
And the best thing about Creative Market is that you’ll be able to clearly see if a font is licensed for web use before purchasing it! And if it’s not, they offer all different types of licensing options for you to add-on to your purchase so that you’ll be covered no matter what.
Adobe Fonts
Next up is Adobe Fonts which is sort of in between free and paid. You don’t need to pay per font, however you can only access Adobe Fonts if you have an Adobe Creative Cloud Subscription. Once you do, you get unlimited access to their massive library of fonts!
Within the platform you can filter by font style to find exactly what you’re looking for, and you can even browse font packs which are curated packs of similar fonts. Perfect for creating a cohesive brand and website design.
Google Fonts
Google Fonts is great because they have a huge library of beautiful fonts all completely free!
It’s also super accessible and doesn’t require a ton of previous font knowledge. Once you find a font you like, simply download it to your computer and it’s yours to use as you please. It’s easy to browse the platform, you can filter by style and font type and can even type in your own piece of text to see how it looks in each font.
At the end of the day, there are so many stunning font choices out there, and we know it can be a daunting task to find the perfect one. Try taking some time to really figure out what it is you’re looking for and to browse all of your options. Trust us, spending the time now will be worth it in the long run!
Woohoo! You did it! You’ve officially added your own custom font to your Squarespace site (and if you haven’t found a font yet, you now know exactly where to look).
All it takes is a little bit of code and some simple tweaks and you have yourself a custom, professional grade website. Now off you go, type away!
Make sure to check out some of our other quick code tricks for customizing your Squarespace site below! 👇
How to customize your Squarespace cookie banner design
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a sticky header nav in Squarespace
6 fun code snippets for your Squarespace web design
If you liked this post, Pin it to Pinterest! 👇🏻
