How to Change Font on Squarespace: A Complete Guide

Typography shapes how visitors experience your site — it affects readability, brand perception, and whether someone stays or bounces. Squarespace gives you meaningful control over fonts, but the system has layers that aren't always obvious at first. Here's exactly how it works.

Where Font Controls Live in Squarespace

Font settings in Squarespace are managed through the Site Styles panel, not on individual pages. This is a global design system — changes you make there cascade across your entire site automatically.

To access it:

1. Log into your Squarespace account
2. Open your site editor
3. Click Edit to enter the visual editor
4. Select Site Styles (sometimes shown as a paintbrush or design icon, depending on your version)
5. Look for the Fonts section

What you see next depends heavily on which Squarespace version you're running — 7.0 or 7.1. These two versions handle fonts differently enough that it's worth understanding which one your site uses before you start.

Squarespace 7.0 vs. 7.1: Key Differences in Font Control

Squarespace 7.1 introduced font packages — curated pairings of heading and body fonts designed to work together visually. You pick a package, and it applies a coordinated set of typefaces across your site in one step. This is faster and reduces design errors, but it's less granular by default.

Squarespace 7.0 uses a more manual approach, where you can set fonts independently for headings, paragraphs, navigation, buttons, and other elements. This gives experienced designers more precise control but requires more decisions upfront.

Changing Fonts in Squarespace 7.1

In version 7.1, the recommended starting point is choosing a font package:

1. Go to Site Styles → Fonts
2. Browse available font packages — each shows a heading font and body font pairing
3. Click a package to preview it live on your site
4. Adjust size and spacing sliders if needed
5. Save your changes

🎨 Beyond packages, you can also override individual text elements. Within the Fonts panel, look for options labeled Heading, Body, Navigation, or Button — each can be customized independently if the package isn't quite right.

Changing Fonts in Squarespace 7.0

In version 7.0, font editing happens inside the Style Editor, which varies slightly by template. The general process:

1. Navigate to Design → Style Editor
2. Click on a page element (heading, paragraph, navigation) to highlight the relevant style control
3. Find the font family dropdown for that element
4. Select a new font from the list
5. Adjust weight, size, and letter spacing as needed
6. Save

Because 7.0 is template-driven, the specific controls available depend on which template your site uses. Some templates expose more font options than others.

Using Google Fonts and Custom Fonts

Squarespace's built-in font library includes a large selection of Google Fonts alongside its own curated options. These are available directly through the font picker — no extra steps needed.

For custom fonts (typefaces you've licensed separately), the process is more involved:

• In 7.1, custom fonts can be uploaded directly through Site Styles → Fonts → Upload a font
• In 7.0, custom fonts typically require adding @font-face CSS via Settings → Advanced → Code Injection

Custom font uploads generally support WOFF, WOFF2, TTF, and OTF formats. Always verify licensing — many commercial fonts restrict web use or require a separate web license.

Factors That Affect Your Font Experience

Not all font changes produce identical results across setups. Several variables shape what you'll actually see:

Template type — In 7.0 especially, the template determines which style controls are exposed. A minimal template may offer fewer font override points than a feature-rich one.

Font rendering across devices — A font that looks elegant on a desktop display may appear heavier or thinner on mobile screens due to differences in rendering engines and screen resolution. Squarespace's live preview shows desktop by default; always check the mobile view separately.

Technical skill level — The packaged font system in 7.1 is genuinely beginner-friendly. Custom font uploads, CSS overrides, and Code Injection are better suited to users comfortable with basic web concepts.

Brand requirements — If you're using proprietary brand fonts, you'll need to manage licensing and upload them manually. Built-in fonts work fine for most personal or small business sites, but corporate brand standards often require specific typefaces that aren't in Squarespace's default library.

Performance considerations — Loading multiple custom fonts increases page weight. Using more than two or three distinct typefaces can slow down initial load times, which affects both user experience and SEO. 🚀

What You Can't Change Through the Style Editor

A few font-related limitations are worth knowing:

• Blog post content and text blocks edited inline may retain manually applied formatting that overrides global styles — you'd need to clear formatting on those blocks individually
• Third-party blocks or plugins may use their own font settings independent of Site Styles
• Some system fonts (like those used in form fields or ecommerce checkout) have limited customization depending on your plan

Understanding which elements are controlled globally versus locally saves a lot of troubleshooting time.

The Variables That Make This Personal

How much of this font system you'll actually use — and which approach will serve you best — depends on things only you can assess: whether you're on 7.0 or 7.1, whether your project has strict brand font requirements, how comfortable you are with CSS for edge cases, and how your site's current template behaves with style overrides.

The mechanics are consistent, but the right configuration looks different depending on the site you're building. 🔍