Squarespace Custom Fonts: How to Upload and Apply Any Font

To add Squarespace custom fonts, upload your font file under Custom Files in the Custom CSS panel, copy its URL, then paste an @font-face rule into Custom CSS pointing at that URL. Once the rule is in and you have told it which elements to style, the font applies sitewide.

What you need before you start

Two things.

First, the font file itself, and the format matters. Use WOFF2 if you can, because it's the smallest and every modern browser supports it. WOFF is the fallback. TTF and OTF work but the files are much larger, which slows your pages down for no benefit.

Second, the license. A font you bought for print, or downloaded for use in Canva, is usually not licensed for web embedding, which is a separate thing you pay for. Check before you upload. Google Fonts are free for web use and Squarespace already has most of them built in, so you may not need any of this.

You also need a plan with Custom CSS access, which on current pricing means Business tier and up.

Uploading your Squarespace custom font file

Go to Website, then Website Tools, then Custom CSS. At the bottom of that panel is a button called Custom Files.

Click it, then Add Images or Fonts, and upload your font file. It'll appear in the list.

Now the important part. Click the uploaded file in that list and Squarespace pastes its URL directly into your CSS editor wherever your cursor is. That's how you get the file's address, and there's no other easy way to find it, which is why this step trips people up.

Upload every weight you plan to use. If you want regular and bold, that's two files and two rules.

The Squarespace custom fonts CSS to paste

Here's the code. Paste it into the Custom CSS box, then edit the two placeholders.

@font-face {
  font-family: 'YourFont';
  src: url('PASTE-YOUR-FILE-URL-HERE') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6,
p, a, li, .sqsrte-large, .sqsrte-small,
.btn, .sqs-block-button-element {
  font-family: 'YourFont', sans-serif !important;
}

YourFont with whatever you want to call it. The name is arbitrary, it just has to match in both places.

For the URL, put your cursor between the quotes, then click Custom Files and click your font. Squarespace drops the URL in for you.

The second block is what actually applies the font. The selectors listed cover headings, body text, links, list items and buttons, which is most of a Squarespace page. Delete any you don't want changed. If you only want headings in the new font, keep the h1 to h6 line and drop the rest.

Click Save and the change appears immediately.

Adding bold and italic properly

One @font-face rule gives you one weight. If you stop there, browsers will fake bold by artificially thickening the letters, which looks muddy.

font-weight: 700font-style: italic.

Keeping the same family name across all of them is the trick. That way the browser picks the right file automatically when text is bold or italic, instead of distorting the regular one.

Don't upload nine weights because the font came with them. Each file is a download on every page load. Two or three is plenty for most sites.

When the font doesn't show up

The most common cause is a URL that didn't paste in. Look at your CSS and check there's a real address between the quotes rather than the placeholder text.

!important is doing in the code above.

If it works for you but not for other people, your browser may be showing a cached version. Try a private window.

font-display: swap line in the code controls that behavior, showing a fallback until your font arrives, which is better than showing nothing.

Rather not deal with any of this? Custom fonts are part of every build I do, or a quick code support job on an existing site.

Frequently asked questions

Do I need a paid plan for custom fonts on Squarespace?

Yes for this method, since Custom CSS and Custom Files need a plan with code access, which is Business tier and up. Squarespace's own built-in font library works on any plan.

What font format should I upload?

WOFF2 first, with WOFF as a fallback. Both are built for the web and far smaller than TTF or OTF, which means faster pages.

Can I use a Google Font that isn't in Squarespace?

Yes. Download the files from Google Fonts and upload them the same way, or link the Google Fonts stylesheet through code injection. Uploading is usually faster since the files come from your own domain.

Will custom fonts slow down my site?

Only if you load too many. Each weight is a separate download, so stick to two or three files and use WOFF2 and the impact is negligible.

Want your brand font set up properly, with the right weights and no flash of the wrong one? Book a free call.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.