How to upload custom fonts to Squarespace
Let's be real, Squarespace has a huge selection of awesome free fonts available for you to use on you website, and we love them for that.
But do they have that gorgeous font you downloaded from Creative Market and used throughout all your branding and social media graphics? Chances are, nope!
So, that leaves us with three options...
Don't use your brand font on your website, go with something similar, how important is branding consistency anyway?
Create graphics of words in your chosen font then upload it as an image every time you want to use it anywhere, it shouldn't be too annoying to update later on, right?
Upload your brand font directly to your Squarespace site and set it to be your Headings or Paragraph text and use it easily and whenever you like.
I think we all realize there's a pretty clear winner here, so, let's get to it!
A couple of disclaimers before we start:
This tutorial involves a little bit of coding. Don't freak! It's basically just a copy and paste method, and it's super easy.
You need to make sure 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, just go ahead and email the font creator and ask if you have the correct license. If you've purchased a font from Creative Market, you'll be able to see if it's licensed for web use on the product page, otherwise, just flick the seller a message and ask! Better to be safe than sorry (aka, fined!)
This tutorial is for Squarespace 7.0 and 7.1!
Step one: Preparing your font files for web use
Not as scary as it sounds, promise.
Your font should either 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's a couple of other file types that would be good to. This just makes sure that your font is compatible over a range of different browsers (basically all of those peeps still using Internet Explorer, yes, it still exists guys...)
Ideally we need 3 versions of our font:
.TTF or .OTF
and a .WOFF
and a .WOFF2
Are you still with me? I swear this step is almost over!
Lucky for us our friends over at FontSquirrel have made this almost impossible to screw up. Click here to the Webfont Generator and upload either your .TTF or .OTF and it will create a .WOFF and a WOFF2 for you! Easy as that.
Step Two: Uploading your font
Head over to the backend of your Squarespace site and click Design > Custom CSS then scroll right to the bottom and click Manage Custom Files
You'll see a button that says Add Images or Fonts.
You guessed it, upload your three font files!
Step Three: Adding your font in the CSS
Ok, so you've uploaded the fonts to the backend... (it should look something like this)
Now we just need to add a bit of code in the Custom CSS box to be able to use them.
First, copy and paste this code into the Custom CSS box:
font-family: 'font-name';
src: url(fontURL.ttf/.otf), url(fontURL.woff), url(fontURL.woff2);
}
Change font-name to the name of your font. For example I would change mine to Rokkitt. This is just so you can reference it later.
Now we need to update the font URL’s. To change the fontURL's you'll need to click on Manage Custom Files again, and then click on one of your font files. As soon as you click on the file you will see a URL automatically pasted within the Custom CSS box. Paste this complete URL into the corresponding area in the code, between the brackets.
Your code should look something like this:
Hit Save in the top left hand corner, because 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 it within your site.
Step Four: Adding it as a Heading font
So you have your new font loaded into your site, but how do you actually use it?
Unfortunately just uploading the font to your site doesn’t mean that it will show up as a font option in your Style Settings, like all of the built-in fonts (that would be nice!) But don’t worry, it’s not too hard to apply it, just one more easy step!
What you’ll need to do is add a little bit more code that changes one of your current Headings to your new font. Eg: H1, H2, H3 or a P (paragraph/body font).
It's easy, just paste this code into the Custom CSS box below the last code:
font-family: 'font-name';
}
By pasting that code into your Custom CSS box, this will change your H1 (Heading 1) to your custom font.
Currently your Heading 1 has been set in your built-in Style Settings, but this code will actually overwrite your Style Settings with your custom font.
And of course, remember to change the “font-name” to the same as the font name you added in the last code.
You can also change the h1 to h2, h3 or P (heading 1, heading 2, heading 3 or Paragraph/Body text). It's seriously that simple! See below for a list of all of the varents.
If you want to change things like letter spacing and font size, you can actually still do this within the Style Settings, just head down to Heading 1 (or whichever heading you have used) and edit them from there. All of the settings will still work, but the font will be different!
Which selectors to use for different fonts:
h1 = Heading 1
h2 = Heading 2
h3 = Heading 3
h4 = Heading 4 - only available on Squarespace 7.1
p = All Paragraph fonts
p.sqsrte-large = Paragraph 1 / Large Paragraph - only available on Squarespace 7.1
p.sqsrte-small = Paragraph 3 / Small Paragraph - only available on Squarespace 7.1
A little bit more advanced:
If you don't want to add it as a main heading font/replace a current heading font but you still want to use it throughout your site, the easiest thing to do is replace the h1 tag with an h4 tag (if you’re in Squarespace 7.0) or h5 (if you’re in Squarespace 7.1). Squarespace doesn't automatically have an h4/h5 (heading 4 or heading 5 depending on which version) option built-in, so this means you are actually creating a whole new header option.
If you do this method though, you will have to use it within a Code Block (not just a regular Text Block, since you won’t find a Header 4/5 option there.)
Add your Code Block wherever you want to use your new font (just click to add a regular block and choose “code”). Then add <h4> or <h5> tags around whatever your text is, eg:
<h4> Put your text inside these tags </h4>
And if you are using this method and you want to change the font settings, you can’t change them in the Style Settings as Heading 4 isn’t an option within Squarespace, but you can change them in the CSS editor by adding the settings to your code:
font-family: 'font-name';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
color: #3b3b3b;
}
Woohoo! You did it! You've officially added your own custom font to your Squarespace site, no need for Typekit or fancy extras, just a little bit of easy coding. 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
How to add a background color to a text block in Squarespace
6 fun code snippets for your Squarespace web design
If you liked this post, Pin it to Pinterest! 👇🏻
