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 CreativeMarket and used throughout all your branding and social media graphics? Chances are, nope!

So, that leaves us with three options...

  1. Don't use your brand font on your website, go with something similar, how important is branding consistency anyway?
  2. Create images of words in your font every time you want to use it anywhere, it shouldn't be too annoying to update later on, right?
  3. Upload your font directly to your Squarespace site and set it to be your H1, H2, H3 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!

 
Learn how to easily upload any fonts that you have on your computer to Squarespace, so you can use them on your website!
 

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 licence. If you've purchased a font from CreativeMarket 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!)

 

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 .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, you've uploaded the fonts to the backend...

 
 

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-face {   
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.

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:

 
How to upload a custom font to Squarespace2.png
 

Hit Save in the top left hand corner, because you've just successfully added your new font!


 

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? Add it as an H1, H2, H3 or a P (paragraph/body font).

It's easy, just paste this code into the Custom CSS box:


h1 {
  font-family: 'font-name';
}

Just change font-name to the name of your font. You can also change the h1 to h2, h3 or P. It's seriously that simple!

If you don't want to add it as a main 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. Squarespace doesn't automatically have an H4 option, so this means you are actually creating a whole new header option.

If you want to use a H4 tag, you will have to use it within a Code Block (not just a reguar Text Block) but don't worry, it's super easy.

Add your Code Block wherever you want to use your new font. Then add H4 tags around whatever your text is, eg:


<h4>
This text will be in my new font
</h4>

 

Woohoo! You did it! You've officially added your own custom font to you Squarespace site, no need for Typekit or fancy extras, just a little bit of easy coding. Now off you go, type away!

 

Related Posts