How to Upload Custom Fonts to Your Squarespace Website

While Squarespace has expanded its font offering, sometimes you just want a very particular font on your website. Maybe it’s the same font that’s in your logo or maybe you just don’t like the font pairings Squarespace is offering.

But how the heck do you get a custom font onto Squarespace? Don’t worry, I’ve got you covered!

How to Choose Fonts for Your Website

When thinking about which fonts to use for your website, you want to make sure you’re always keeping legibility in mind, along with design. If you find the most incredible, cool font but it’s really hard for most people to read, especially on a small cell phone screen, that’s not going to be the best font. You want to pick fonts that are easy to read and clean.

I typically recommend no more than two to three different fonts for a website. I usually recommend a display font or one that has more character and embellishments, a header font, and a body or paragraph font.

Display Font

The display font can be your logo font or something similar that is used very sparingly throughout your website. Think occasional headers or a headline you really want to emphasize. Display fonts shouldn’t be used too much throughout your site or they’ll lose their effect. And you never want to use your display font for large chunks of text or paragraphs.

Header Font

Some people skip a display font altogether and just use a header font and a body font. Your header font can be similar to a display font or it can be much plainer. Because this is going to make up the majority of the headings on your website, you want to make sure it’s easy to read and catches people’s attention. You can also make the header font all caps if you want to create even more emphasis with your headlines (more on how to style the font later), but you can set it to display however you like.

Body Font

Your body font should be extremely legible and not too small. Remember, over 50% of people are visiting your site from a mobile device, which is already tiny. So unless your target audience is 15-year-olds, you need to make sure adults of all ages can easily read your text.

It’s your website and you can choose to design it however you like, but I typically recommend pairing a sans serif font (a font that doesn’t have those little edges on the end – a font like the one I’m using here) with a serif font (one that does have those little edges). Sans serif fonts tend to look a bit more modern while serif fonts have a fancier vibe.

Pinterest also has a lot of great font combinations if you’re looking for inspiration and aren’t quite sure where to start.

Where to Find Fonts

First, you’ll need to go about finding the fonts you want to use on your site. In order to upload a custom font, you’ll either need access to a subscription, like Adobe Fonts, which can be quite expensive, or you’ll need to purchase and download the custom font from sites like FontSpring, Font Squirrel, or Creative Market.

I do want to caution you to read the licensing rights very carefully! Some fonts can only be used one-time, others have to be purchased based on how many visitors you have on your website, and others are completely unlimited for commercial use.

You also don’t need to make all the fonts on your website custom. I typically recommend finding a header font (and potentially a display font) that’s custom but using one of Squarespace’s preset fonts for the body copy.

Once you’ve found the custom font(s) you like, download the font files. Ideally, the font would have a web version available (a .woff or .woff2 version), but you may only see .ttf or .otf versions available. The .woff versions are specifically for web so if you can snag those, that’s great, but the .ttf and .otf versions will work as well.

How to Upload Custom Fonts to Squarespace

If you’re using one of Squarespace’s fonts, you can easily add that font through the Design tab under Fonts. If you want to upload a custom font to your site that’s not part of Squarespace’s included fonts, you’ll need to do a bit of custom code.

1. Once you have the font file downloaded to your computer, open your Squarespace website and click on the Design section on the left-side of your website. Then, scroll all the way to the bottom and choose Custom CSS.

2. Once you have the Custom CSS window open, you’re going to go to the bottom and click on Manage Custom Files. Here, you’re going to upload your font file (the .ttf or .otf version).

3. Then, you’re going to paste in the following custom code:

@font-face {font-family: ‘NAME’; src: url(‘URL-LINK’);}

h1, h2, h3 {font-family: ‘NAME’;}

The first line of code is telling Squarespace to pull in a font family using a specific URL. You can replace NAME with anything you want to name your font. Then, for the URL-LINK part, you’re going to replace that with the URL of the file you uploaded. You can do this by removing URL-LINK, placing your cursor where it used to be, and opening the Manage Custom Files pop up. Click on the font file you just uploaded and Squarespace will automatically add the URL of the file in for you. It’s really important with code to make sure you don’t accidentally delete or add anything. Accidentally removing the little apostrophe or parenthesis will mess up the code so make sure you’re being really careful.

The second line of code is telling Squarespace which font types to use that font file for on your site. So replace NAME with the name you gave your font in the line above and choose which headings you want to use your custom font for on your website. For example, you might do this once for your heading font for h1, h2, h3 and then do it again for a display font for h4 as a sub-heading.

Alright, let’s see a real example:

Let’s say you want a font we’ll call Shelby to be your font for h1 and h2. Your code would look like this:

@font-face {font-family: ‘Shelby‘; src: url(‘https://static1.squarespace.com/static/fe1362d0/Shelby.ttf‘);}

h1, h2 {font-family: ‘Shelby‘;}

Everything in purple needs to be added to the code based on what you want to name your font (ex. Shelby) and the URL Squarespace automatically assigns to the font file once you upload it.

Styling Your Font

Now, there are two ways to style your font. If all you’re changing is the font itself, you can actually still use all of the features within the Design tab on Squarespace. So even though the design tab may say that you’re using Arial as your header font, this code that you’ve added will override your h1 and h2 header fonts to be Shelby while h3 and h4 will still be Arial.

The first way is within the design tab on Squarespace. Here, you can still edit the font size, the line height (space between the lines of text), the letter spacing or kerning (space between the individual letters), whether the text uses all caps or sentence case, whether the text is italicized or not, etc. This is probably the easier way for beginner coders. If this is your first time, I’d recommend changing the font with custom code (as shown above) and then making all your other changes within the Design tab.

The second way is to edit all of these settings within the code right from the custom CSS window. All you have to do is add the code right below the existing lines of code within the CSS window. There are lots of possibilities for customizing your code, but I’ll go into a few of the most common ones below.

You’ll add any additional code within the second line of code from above. Make sure you separate lines using a semicolon:

h1, h2 {font-family: ‘Shelby’;
font-size: 15px;
color: blue;
text-transform: uppercase;}

So in the example above, we have the original line of code changing h1 and h2 to the Shelby font we’ve uploaded. Then we’re changing the font size to 15 pixels. This can be any number you want, but remember to make sure that the size you choose is legible on all devices. Then, we’re changing the color of this h1 and h2 font to blue. This can be any color you like by name (ex. blue, purple, red) or this can be a custom color with any hex color code (ex. #ffffff). And lastly, we’re changing all h1 and h2 across our site to be uppercase with the text-transform property.

There you have it! You’ve successfully added a new font to your site and styled it!