← All postsPublished: Feb 16, 2024Updated: Sep 20265 min readDesign

Squarespace Fonts: How to Change Them Sitewide

To change Squarespace fonts sitewide, click the paintbrush icon in the top right of the editor to open Site Styles, then click Fonts. Change the global font to update the whole site at once, or set headings, paragraphs and buttons separately underneath.

Changing the font sitewide

Open your site editor and click the paintbrush icon in the top right corner. That's Site Styles, where all your global design settings live.

The first box in the panel is Fonts. Click it.

At the top you'll find the global font setting. Change this and everything on your site updates at once, including headings, paragraphs and buttons, unless you've overridden them individually.

This is the fastest way to change the feel of a site. It's also the fastest way to break it, so look at a few pages afterward rather than judging from the homepage alone.

Setting Squarespace fonts for headings and body separately

Underneath the global setting, you can control each text type on its own.

Headings carry the personality. This is where a distinctive font earns its place.

Paragraphs carry the reading. This is where you want something plain and legible, because visitors read body text for far longer than they read a headline.

Buttons should usually match your body font. A button in a display face tends to look like a mistake.

Inside each one you can adjust family, weight, size, letter spacing and line height. Line height is the one people ignore and it matters most for readability. For body text, somewhere around 1.6 to 1.8 is comfortable. Squarespace defaults are often tighter than that.

Want this handled for you?Custom Squarespace design and development, built and handed off in 2-5 weeks.Book a free call

Choosing a Squarespace font pairing that works

Two fonts is the answer for nearly every site. One for headings, one for body. Three is a risk and four is a mess.

The reliable formula is contrast. Pair a distinctive heading font with a plain, highly legible body font, so each is doing a different job. Two fonts that are almost the same read as a mistake rather than a decision.

For body text, prioritize legibility over character every time. If you're unsure, a well-drawn sans-serif at a comfortable size will never look wrong.

And check the size on mobile. Body text below 16px is hard work on a phone, and a lot of designs that look elegant on a laptop are genuinely uncomfortable to read on a small screen.

Using a font that isn't in the list

Squarespace ships with a large library including most of Google Fonts and a selection from Adobe. If your brand font isn't in there, you can upload it yourself.

That takes a font file and a few lines of CSS, which I've written up step by step in adding custom fonts to Squarespace, code included.

Worth checking the license first. Fonts bought for print or bundled with design software often aren't licensed for web embedding.

Saving and checking your work

Click Save in the top left. Changes apply immediately across the site.

Then check three things before you move on. Look at a long text page, not just the homepage, since that's where readability problems show. Look at it on your phone. And check your buttons and navigation, which are easy to forget and obvious when they're wrong.

If a change looks fine everywhere but one section, that section probably has an individual override on it from earlier editing.

Frequently asked questions

How do I change the font on just one page in Squarespace?

Site Styles is global by design, so there's no per-page setting. Doing it for one page means custom CSS targeting that page's ID, which is possible but worth thinking twice about, since inconsistent typography usually looks like an accident.

Why did my font change not apply everywhere?

Something has an individual override, usually a heading or button styled separately at some point. Check the specific text type in Site Styles rather than the global setting.

Can I use my own brand font?

Yes, by uploading the font file and adding a short CSS rule. My custom fonts guide walks through it with the code.

How many fonts should a website use?

Two. One for headings, one for body. Three can work if the third has a clearly defined job, but most sites are better with two.

Not sure which pairing suits your brand? That is part of what I work out on every custom build. 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.

Don’t miss these

All posts