How to Add Your Own Brand Fonts to a Squarespace Template
Your brand fonts carry more weight than almost any other visual choice you make. The curve of a lowercase g, the airy spacing of a serif, the confident weight of a display face at the top of your homepage: these are the details that make a website feel like yours and not a template someone else touched first. So when you want to upload custom fonts to Squarespace, what you're really doing is closing the gap between the identity you designed and the site your visitors see for themselves. Good news: you don't need code to do it, and the process is gentler than most people expect.
Below is the full walkthrough, split by Squarespace version, plus the parts other guides skip: file formats and licensing, troubleshooting the dreaded unsupported-font message, applying your typeface to buttons and forms, and keeping your site fast while you're at it.
What Fonts Can You Upload to Squarespace?
Squarespace accepts three font file formats for custom uploads: .otf, .ttf, and .woff. OpenType (.otf) and TrueType (.ttf) are the desktop files you'll usually get when you buy or download a typeface. WOFF (.woff) is a web-optimized format that tends to load a touch faster because it's compressed for the browser. If you have the choice, WOFF is the lightest option for site speed, but any of the three will display correctly.
A quick note on the newer WOFF2 format, since nobody seems willing to say it plainly: Squarespace's own documented list sticks to OTF, TTF, and WOFF. If you have a WOFF2 file, convert it to WOFF or upload the OTF version instead rather than gambling on it. Don't rely on WOFF2 support unless Squarespace's help documentation confirms it for your setup.
Then there's the part that trips up well-meaning people: licensing. A font file you found floating around a free-download site is not automatically legal to embed on a live website. Desktop licenses (the kind that let you use a font in Canva or Illustrator) are different from webfont licenses (the kind that let you serve the file to visitors' browsers). When you buy or download a typeface, look for a webfont or web-embedding license specifically. Reputable places to source fonts with clear licensing include Google Fonts (open-source and free to embed), Creative Market, and independent type foundries who spell out exactly what each license covers. If you're unsure what the difference between a typeface and a font even is, the distinction between typeface and font is worth a two-minute read before you start buying files.
Uploading a font you don't hold a webfont license for isn't a gray area - it’s illegal. It's the digital equivalent of borrowing something you were never lent. Buy the right license, keep the receipt, and sleep well.
How to Upload a Custom Font in Squarespace 7.1 Website
This is the smooth path, and it's the one most readers need. Absolutely no code & just a handful of clicks.
Open the editor and click Website, then Site Styles (the paintbrush icon). Some versions of the panel let you open Site Styles directly from any page you're editing.
Find the Fonts section. Click into Fonts, then look for the option to assign or manage font families. You'll see a font selector where you can browse Squarespace's built-in library.
Choose to add a custom font. Inside the font picker, there's an option to upload your own. Click the Add or + control to open the upload area for custom files.
Drag and drop your file (or click to browse). Upload each weight separately: your Regular, your Bold, your Italic, each as its own file. Squarespace treats these as distinct uploads, and this matters, because if you only upload Regular, your bold text won't have a true bold to pull from. It'll fake one, and faux-bold always looks a little smeared next to the real thing.
Name and assign the weight. As you upload, tell Squarespace which weight and style each file represents (400 for regular, 700 for bold, and so on). Getting this right is what makes your headings and body text render crisply.
Apply it to your text styles. Once uploaded, your custom font appears in the list. Assign it to Headings, Body, or a specific heading level. Watch the preview update live and adjust sizing and spacing until it feels balanced.
That's the whole thing. If you want to go deeper on matching every other visual element to your typeface once the font is in place, the walkthrough on customizing a 7.1 template to your branding picks up right where this leaves off, with colors, spacing, and section rhythm.
Adjust Individual Text Styles
Here's the piece almost every other guide leaves out. Getting your font onto headings and body text is the easy 90 percent. Buttons, form fields, and navigation often keep rendering in the default because they're styled separately under the hood. A single mismatched button font can undercut an otherwise polished page without anyone noticing right away.
So, once you've chosen your fonts, click Assign Styles.
This is where you can fine-tune exactly how each type style appears throughout your website.
Squarespace lets you customise styles including:
Site Title
Navigation
H1
H2
H3
H4
Paragraphs
Buttons
Quotes & more
Rather than changing every heading manually, you'll adjust each style once and Squarespace will apply those settings across your entire website.
-
To upload custom fonts on Squarespace, on Squarespace 7.1 you can do this entirely through Site Styles with no code at all. Open Site Styles, go to Fonts, and use the upload option inside the font picker to add your .otf, .ttf, or .woff files, then assign them to your headings and body.
On 7.0 it depends on your template; some allow a no-code path through the style editor, while others need a short CSS snippet to apply the font sitewide.
-
Google Fonts work on both versions because you can download the files and upload them like any custom font. Adobe Fonts has a built-in integration, but it's available on Squarespace 7.0 only. On 7.1 you can't connect Adobe Fonts through that integration, so you'd need to license the typeface as a webfont file separately (where Adobe's terms permit) and upload it manually, or pick a different source.
-
Squarespace accepts .otf, .ttf, and .woff files. WOFF is the most web-optimized of the three and loads a little faster. WOFF2 is not confirmed as supported, so convert those files to WOFF or upload the OTF version instead of risking an unsupported-font error.
-
The most common cause is browser caching, so do a hard refresh first. After that, confirm the file is in a supported format, that you saved and published the change, and, on 7.0, that the file URL in your CSS matches exactly what Manage Custom Files generated. If only bold or italic looks wrong, you probably need to upload those weights as separate files.
-
No. You need a webfont or web-embedding license specifically, which is different from a desktop license that only covers use in design software. Free open-source fonts like those on Google Fonts are safe to embed, and reputable marketplaces and foundries state their license terms clearly. When in doubt, buy the webfont license and keep proof of purchase.
Once your brand fonts are in place and rendering cleanly across every button and breakpoint, you'll feel the shift in consistency immediately. Take an afternoon, add them to your Squarespace template one weight at a time, and preview as you go. If it starts to feel like more than you signed up for, that's simply your cue to reach for help, not a sign you did anything wrong.
