HOW TO ADD A CUSTOM FONT TO SQUARESPACE

How to add a custom font to Squarespace.png

For a long time, I didn’t see the need of adding extra fonts to Squarespace because it already comes with so many choices. And to me, sometimes too many choices leads to overwhelm and indecision.

So in keeping up with my motto of “less overwhelm, more joy”, I never even considered adding extra fonts to my Squarespace website because it seemed unnecessary.

That was until I came across a beautiful new font on Creative Market and thought “I really want that font!” So I decided to install it on my site.

While googling instructions on how to add a custom font to Squarespace, I came across a lot of confusing articles with different instructions. Some of them felt really inconvenient and difficult for no reason.

So I thought, I would write this quick blog post with instructions for adding custom fonts that are the most straightforward and simplest to implement. 

First of all, you need to find a font you want and download it on your computer. As I mentioned before, Creative Market is one source for buying unique fonts. But there are also free sources you can get them at, such as Google Fonts and Dafont.

You’ll most likely get a zipped file, so you’ll need to extract it first. Once you have your chosen font ready, open up your Squarespace dashboard.

From there, go to Design -> Custom CSS. Scroll down and click on MANAGE CUSTOM FILES.

A new option will pop up to that says Add images or fonts. Click on that and browse your computer for that new font you just downloaded to select it. The font file will end with either .OTF or .TTF.

Now it’s time to add some code to put it all together. Don’t worry, it’s relatively painless, I promise. :)

Inside your CUSTOM CSS window, copy and paste the following code:

@font-face {
    font-family: 'font_name';
    src: url('fonturl.ttf');
}

Now delete the fonturl.ttf and keep your mouse cursor between the single quotation marks. Then click on MANAGE CUSTOM FILES  again and click the file name of the font your just uploaded.

Now you should see the proper URL of your new font where your cursor was.

The final steps will allow you to use this new font.

Basically, you have your new font in, but you need to specify where you want to use it now. So let’s say you want your main heading H1 to be changed to your new font. In order to make that happen, you will need to copy and paste the following piece of code:

h1 {
    font-family: font_name;
}

*Where it says font_name, you need to swap that for the name of the font you just installed.

Now all you have to do is save the changes and you’re done. Voilà!

If you would like to use this new font in other areas, just copy and paste the above code again, but change the H1 to whatever you want, like H2, H3, Body Text or even Quote Block. You get the idea.

If you want to take it even further, you can add extra code to include other options.

For example:

h1 {
    font-family: font_name;
    font-size: 40px;
    font-weight: bold;
    color: #777777;
    text-transform: uppercase;
}

You can play around with each line till you get the effect you want. Have fun!

 

RELATED POSTS YOU'LL LOVE...