How to Change Font on Squarespace 7.1 (Site Styles + CSS)

By Umair Ali Sadaqat · Updated November 6, 2026 · Editorial policy

Change fonts on Squarespace 7.1 in Site Styles, upload your own font file, or target one element with custom CSS. Steps, a decision table, and fixes.

Short answer: On a Squarespace 7.1 site, open Site Styles, click Fonts, and either choose a font pack or style Headings, Paragraphs, Buttons, and Miscellaneous one at a time. To use a font that isn't in the library, upload your own file in the same panel. Use custom CSS only when you need to change one specific element.

This guide covers the version 7.1 steps, as described in Squarespace's own help center (checked November 2026). If your site is on version 7.0, the panel names differ; see the version note near the end.

Which method should you use?

Pick the lightest option that gets the result you want. Each step down the table takes more setup.

What you want	Best method	Effort
A whole new look in one click	Font pack in Site Styles	Low
Different fonts for headings and body text	Per-category fonts in Site Styles	Low
A specific Google Font	Font dropdown search	Low
A brand font you own a license for	Upload a font file	Medium
One heading, one button, or one section only	Custom CSS	Medium to high

Method 1: Change fonts with a font pack

A font pack sets matching fonts for every text category at once, which is the quickest way to restyle a site.

Open the editor and click Site Styles (the paintbrush icon).
Click Fonts.
Pick one of the recommended packs, or click All Font Packs and filter by sans-serif, serif, or mixed.
Scroll your pages to check headings, body text, and buttons before you close the panel.

Packs are a good start, but they can leave you with a heading font you like and a body font you don't. That is what the next method fixes.

Method 2: Change the font for one text category

Under Fonts, Squarespace splits text into four groups. You can set each one separately:

Headings: page titles and the heading styles in your text blocks.
Paragraphs: body text.
Buttons: button labels.
Miscellaneous: smaller text such as captions and form labels (this group's exact scope varies by template, so check a few pages after changing it).

To change one:

In Site Styles > Fonts, click the category you want, for example Headings.
Open the font dropdown and search by name.
Choose the font, then adjust its style, weight, and size settings as needed.
For Adobe Fonts, use the Additional Fonts link at the bottom of the list.

Squarespace also lets you set a base size that other text scales from, so if everything looks too large or small after a swap, adjust that before resizing individual blocks.

A practical tip: change headings and paragraphs in separate passes. If you change both at once and something looks off, you won't know which one caused it. For help choosing a pairing, see our guide to how to choose website fonts.

Method 3: Upload your own font

If your brand uses a font that isn't in the library, upload it. Squarespace says you need the font owner's or licensor's permission to use a font this way.

Get the font file in OTF, TTF, WOFF, or WOFF2 format. The Site Styles uploader accepts all four.
Open Site Styles > Fonts, choose a category (or the font dropdown), and look for the upload option.
Drag your file into the uploaded fonts panel, or click the plus icon and choose it from your computer.
Select the uploaded font for the category you want.
Publish, then view the live site on desktop and phone to confirm the font loads.

Interface wording shifts from time to time, so if a button is labeled differently, look for the upload or plus icon within the font dropdown.

Common upload problems

The font appears in the list but looks wrong. The file may be missing a weight or style (bold, italic). Upload each weight you plan to use as its own file.
The font works in the editor but not for visitors. Hard refresh the published page, and check the font file's license for web use.
You uploaded a WOFF2 file and tried to reference it from the CSS file area. The Custom Files area in the CSS editor lists TTF, OTF, and WOFF as its font types, not WOFF2. Use the Site Styles uploader for WOFF2.

Method 4: Target one element with custom CSS

Site Styles changes fonts site-wide by category. When you need an exception, such as one heading in a different font, custom CSS can do it. Squarespace's own CSS guidance says CSS should be limited to fonts, colors, and backgrounds, since other changes can break your layout.

Upload the font first with Method 3, or pick a library font, so the font is already available on your site.
Open Website > Pages > Custom CSS (the exact path can differ slightly by site).
Paste a rule like the one below, then save.

```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }

/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```

Replace "Your Font Name" with the exact name shown in Site Styles. The generic fallback (serif or sans-serif) keeps text readable if the font fails to load. Class names can vary by template and by Squarespace updates, so use your browser's inspector to confirm the selector for the element you're targeting.

If you apply CSS to one page only, Squarespace's help center describes page-level options for this; confirm the current steps there before relying on it.

A quick font checklist before you publish

Copy this list and run through it once.

[ ] Headings and body text use no more than two font families.
[ ] Body text is easy to read on a phone, not just on a desktop.
[ ] Every weight you use (regular, bold, italic) is available in the font.
[ ] You have the license to use any uploaded font on the web.
[ ] Buttons and form labels use a font that matches the rest of the page.
[ ] You saved a copy of any custom CSS you added.
[ ] You checked the live site, not only the editor preview.

Version 7.0 vs 7.1

Squarespace's help center states that the 7.1 font options apply to 7.1 sites and that 7.0 sites have their own font settings. On 7.0, font changes go through the Design panel's Site Styles. If you are weighing a move, Squarespace has an update tool, and our Squarespace review covers how the current editor compares. If fonts are one of several things frustrating you, the Squarespace alternatives page lists other builders, and our cost breakdown shows what a Squarespace site runs in total.

If you're starting a new site

When you're picking a template or building a site from scratch, choose the typography first. It's easier than fixing it afterward. We.Inc's free plan lets you publish up to three sites from ready-made templates; the AI builder that drafts a site from a prompt starts on the Starter plan at $20 a month. You can sign up here.

Frequently asked questions

How do I change the font on my whole Squarespace site?

On a version 7.1 site, open Site Styles, click Fonts, and either pick a recommended font pack or open All Font Packs and filter by sans-serif, serif, or mixed. A font pack sets the fonts for headings, paragraphs, buttons, and miscellaneous text in one move.

Can I use any Google Font in Squarespace?

You can search Google Fonts by name in the font dropdown, but Squarespace's own help center says not every Google Font is in its library. If the one you want is missing, you can upload the font file yourself, provided the license allows it.

What font file types can I upload to Squarespace?

The font uploader in Site Styles accepts OTF, TTF, WOFF, and WOFF2 files. The separate Custom Files area used with the CSS editor lists TTF, OTF, and WOFF, so for a WOFF2 file use the Site Styles uploader rather than the CSS file area.

Do I need permission to upload a custom font?

Yes. Squarespace's help center says you need the font owner's or licensor's permission to use a font on your site. Check the license for web use before you upload it.

Why are the font steps different on my site?

Version 7.0 and version 7.1 sites have different font settings. The steps in this guide are for 7.1. On 7.0, font changes run through the Design panel's Site Styles. Squarespace also notes that custom Adobe fonts set up on 7.0 are not supported on 7.1, so you would pick a built-in 7.1 font instead.

Does custom CSS carry over if I switch templates?

On a version 7.0 site, Squarespace says custom CSS does not transfer when you switch templates. Keep a copy of any CSS you add so you can paste it back in if you need to.

Alternatives mentioned in this article

Squarespace alternatives

Related guides and tools

Start building

How we research, test and update this page: our editorial policy. We.Inc is our own product.