How to Change Font on Squarespace: Step-by-Step

Your font choice shapes how visitors perceive your brand within seconds.

Learning how to change font on Squarespace gives you control over your site’s typography settings, from headings and paragraphs to buttons and navigation menus.

Squarespace offers access to 600+ Google Fonts and 1,000 Adobe Fonts through the Site Styles panel. You can also upload custom font files using CSS.

This guide walks through four methods: selecting font packs, customizing individual text styles, adjusting size and spacing, and adding fonts not in the default library.

Each step includes exact paths, specific settings, and troubleshooting fixes.

Takes about 5-15 minutes depending on your approach.

How to Change Font on Squarespace

Changing font on Squarespace is the process of modifying typography settings for headings, paragraphs, buttons, and navigation text through the Site Styles panel.

Users need this when customizing brand identity, improving readability, or matching website design to existing style guidelines.

This guide covers 4 methods requiring 5 to 15 minutes depending on complexity, using Squarespace version 7.1.

Prerequisites

Before you start, confirm you have the following:

• Active Squarespace account with website editing access
• Squarespace 7.1 (steps differ for version 7.0)
• 5-15 minutes depending on method
• Basic understanding of website navigation
• Optional: Adobe Fonts account for expanded font library access
• Optional: Custom font files in WOFF, WOFF2, TTF, or OTF format

Not sure which version you have? Check under Settings > Site Availability in your dashboard.

Step One: How Do You Access the Font Settings Panel?

Open your Squarespace dashboard, click the paintbrush icon in the top-right corner, then select Fonts from the Site Styles menu to access all typography controls for your website.

Action

Log in to your Squarespace account and open your website editor.

Click the paintbrush icon located in the top-right corner of the editing interface.

Select “Fonts” from the left panel under Global Styles.

Purpose

The Site Styles panel controls all font settings across your entire site. Changes here apply globally unless overridden by section-specific formatting.

Step Two: How Do You Select a Font Pack for Site-Wide Typography?

Click “Switch Font Pack” in the Fonts menu, browse through Squarespace’s pre-designed font combinations, and select one to automatically apply coordinated typography styles to headings, paragraphs, and buttons site-wide.

Action

Inside the Fonts panel, click “Switch Font Pack” at the top.

Scroll through available packs or use the search field.

Click any pack to preview; click again to apply.

What Font Packs Does Squarespace Offer?

Squarespace provides 60+ curated font packs using Google Fonts. Each pack pairs complementary typefaces for headings and body text.

Packs range from modern sans-serif combinations to traditional serif pairings.

Where Do Font Pack Settings Apply Across Your Site?

Font packs automatically configure:

• Heading 1 through Heading 4 styles
• Paragraph text (P1, P2, P3)
• Button typography
• Navigation menu fonts
• Miscellaneous text elements

You can customize individual settings after applying a pack.

Step Three: How Do You Change Individual Font Styles Manually?

Skip font packs and select specific typefaces for each text category by clicking Headings, Paragraphs, or Buttons in the Fonts menu, then choosing your preferred font family, weight, and size from the font selector.

Where Do You Modify Heading Fonts?

Click “Headings” in the Fonts panel. Select the font name to open the font library with 600+ Google Fonts and 1,000 Adobe Fonts.

Adjust size using the slider; Squarespace uses REM units relative to your base size.

Where Do You Modify Paragraph Fonts?

Click “Paragraphs” to access body text settings. Choose font family, then set sizes for P1, P2, and P3 variations.

The base font size (default 16px) determines how all other text scales across devices.

Where Do You Modify Button Text Fonts?

Select “Buttons” from the Fonts menu. Configure primary, secondary, and tertiary button styles separately.

Adjust font weight, letter spacing, and text transform (uppercase, lowercase, capitalize) for each button type. If you need to change button color in Squarespace, that setting lives in the Colors panel.

Where Do You Modify Navigation Menu Fonts?

Navigation fonts appear under “Miscellaneous” or within the Header settings depending on your template.

Click Site Styles > Header > Navigation to find menu typography options including font family, size, and spacing for your navigation links.

Step Four: How Do You Adjust Font Size and Spacing?

Click any text category in the Fonts panel, use the size slider to adjust scale in REM units, then fine-tune letter spacing and line height values to control text density and readability across all devices.

What Is the Base Font Size Setting?

The base size (default 16px) acts as your reference point. All other text scales relative to this value using REM units.

Setting base size to 18px makes a 1.5rem heading display at 27px instead of 24px.

How Does Text Scaling Work Across Devices?

Squarespace automatically adjusts font size based on screen width. Desktop shows full size; mobile scales down proportionally.

Set minimum and maximum values in Site Styles to control the scaling range and maintain responsive typography across all viewport sizes.

Alternative Method: How Do You Add Custom Fonts Using CSS?

Upload your font file to Squarespace, add @font-face code in the Custom CSS Editor, then apply the font family to specific elements using CSS selectors for complete typography control beyond default options.

Where Do You Upload Custom Font Files?

Go to Design > Custom CSS. Click “Manage Custom Files” at the bottom of the editor.

Upload your WOFF2 or WOFF file (best browser support). Copy the generated URL.

What CSS Code Applies Custom Fonts to Specific Elements?

Add this CSS code to your Custom CSS panel:

“ @font-face { font-family: 'YourFontName'; src: url('your-uploaded-font-url.woff2'); }

h1, h2, h3 { font-family: ‘YourFontName’, sans-serif; } `

Replace selectors (h1, h2, .class-name) to target specific elements.

Alternative Method: How Do You Add Google Fonts Not in the Default Library?

Copy the embed code from fonts.google.com, paste it into Settings > Advanced > Code Injection (Header), then reference the font family name in Custom CSS to use any Google Font not included in Squarespace’s default 600-font selection.

Action

Visit fonts.google.com and select your font. Click “Get embed code” and copy the link tag.

Paste into Settings > Advanced > Code Injection > Header. Add CSS to apply:

` body { font-family: 'FontName', sans-serif; } `

Verification

Confirm your font changes applied correctly before publishing:

• Desktop preview: Click the desktop icon in the editor toolbar; check all heading levels and paragraph text
• Mobile preview: Click the phone icon; verify fonts remain readable at smaller sizes
• Published site: Open your live URL in an incognito window to bypass cache
• Cross-browser: Test in Chrome, Safari, Firefox, and Edge for cross-browser compatibility

Custom fonts may render differently across browsers. Safari sometimes struggles with certain WOFF files.

Troubleshooting

Issue: Font Changes Not Appearing on Live Site

Solution: Clear your browser cache (Ctrl+Shift+Delete), then hard refresh the page (Ctrl+F5). Check that you clicked “Save” in Site Styles before exiting.

If using custom CSS, verify no syntax errors exist in your code.

Issue: Custom Font Not Loading Properly

Solution: Confirm your font file URL is correct in the @font-face declaration. Use WOFF2 format for best compatibility.

Check that the font-family name in your CSS matches exactly what you defined in @font-face.

Issue: Font Looks Different on Mobile Devices

Solution: Adjust the minimum font size in Site Styles > Fonts to prevent text from scaling too small. Set a floor of 14-16px for body text.

Use media queries in Custom CSS for precise mobile control.

Issue: Adobe Fonts Not Showing in Font Library

Solution: Connect your Adobe account under Settings > Connected Accounts > Adobe Fonts. Sign in and authorize Squarespace access.

Adobe Fonts require an active Creative Cloud subscription. Free accounts have limited font access.

Related Processes

• How to add fonts to Squarespace
• How to change favicon on Squarespace
• How to edit Squarespace website
• How to duplicate a page in Squarespace
• How to create a landing page on Squarespace

FAQ on How To Change Font On Squarespace

How Do I Access Font Settings in Squarespace?

Click the paintbrush icon in the top-right corner of your editor, then select Fonts from the Site Styles panel.

This opens all typography controls for headings, paragraphs, buttons, and miscellaneous text elements.

Can I Use Custom Fonts on Squarespace?

Yes. Upload WOFF or WOFF2 files through Design > Custom CSS > Manage Custom Files.

Add @font-face code in the Custom CSS Editor to apply your uploaded font to specific elements using CSS selectors.

What Fonts Are Available in Squarespace?

Squarespace includes 600+ Google Fonts and 1,000 Adobe Fonts in its default library.

Adobe Fonts require a connected Creative Cloud account. You can add unlisted Google Fonts via code injection.

How Do I Change Font Size in Squarespace?

Open Site Styles > Fonts, click any text category, and use the size slider.

Sizes use REM units relative to your base size (default 16px). Adjust base size to scale all text proportionally.

Why Isn’t My Font Change Showing on My Live Site?

Clear your browser cache and hard refresh (Ctrl+F5). Confirm you clicked Save in Site Styles before exiting.

For custom fonts, check your CSS syntax and verify the font file URL is correct.

How Do I Change the Navigation Menu Font?

Go to Site Styles > Header > Navigation to find menu typography options.

Some templates list navigation fonts under Miscellaneous in the Fonts panel. Adjust font family, size, and letter spacing there.

Can I Use Different Fonts for Different Sections?

Not through the default Site Styles panel. Global font settings apply site-wide.

Use Custom CSS with section IDs or class names to target specific areas. Right-click any section and select Inspect to find its selector.

How Do I Add Google Fonts Not in the Default Library?

Copy the embed link from fonts.google.com. Paste it into Settings > Advanced > Code Injection > Header.

Reference the font family name in Custom CSS to apply it to your chosen elements.

What’s the Difference Between Font Packs and Manual Font Selection?

Font packs apply pre-designed typography combinations to all text categories instantly.

Manual selection lets you choose individual fonts for headings, paragraphs, and buttons separately. Both methods use the same font library.

How Do I Change Button Text Fonts?

Open Site Styles > Fonts > Buttons. Select font family, adjust weight, and set letter spacing for primary, secondary, and tertiary button styles.

Text transform options (uppercase, lowercase) appear here too.

Conclusion

You now know how to change font on Squarespace using four different methods.

Font packs offer quick site-wide typography changes. Manual selection gives you control over each text category. The Custom CSS Editor handles fonts outside the default library.

Start with the Site Styles panel for basic adjustments to font family, weight, and letter spacing.

Move to custom code when you need specific typefaces or section-level control.

Always test your changes across desktop and mobile views. Check multiple browsers too.

Your text formatting choices affect readability and brand perception. Take time to find combinations that match your style while keeping content easy to scan.

Save your work before exiting the design editor.