My Fonts and Colors Changed After Switching Squarespace Templates, Can that be Fixed?

Why Fonts and Colors Change After Switching Templates

Site Styles Are Template-Specific on 7.0

On Squarespace 7.0, each template stores its own set of Site Styles values - font families, font sizes, colors, spacing, and button styles. When you switch from Template A to Template B, Template B applies its default values. Your Template A settings do not transfer. This is by design - each template has a different visual system that requires its own configuration.

Custom CSS Font Rules May Also Break

If you used Custom CSS to set specific fonts (beyond what Site Styles offered), those CSS rules may stop working too - the selectors target class names from the old template. See our guide to why Custom CSS disappears after switching templates for the full explanation and fix.

How to Restore Your Fonts

Step 1: Open Site Styles

Go to Design > Site Styles. This is where all font settings live on every Squarespace template.

Step 2: Set Your Heading Font

Find the heading font setting (labeled "Heading Font," "H1 Font," or similar depending on the template). Select your brand's heading font from the built-in library. Set the weight (typically bold/700 for headings). Set the size for H1, H2, and H3 if the template offers individual controls.

Step 3: Set Your Body Font

Find the body text font setting. Select your brand's body font. Set the weight (typically regular/400). Set size to 16 to 18 pixels. Set line-height to 1.6 to 1.8 for readability.

Step 4: Check Navigation and Button Fonts

Some templates have separate font settings for navigation menu items and buttons. Configure these to match your brand. For font selection guidance, our guide to best Squarespace fonts covers pairings for every brand style.

If Your Font Is Not in the Built-In Library

If your brand font is not available in Squarespace's built-in font library, you need to reload it through Code Injection (Google Fonts link tag or Adobe Fonts script) and reapply it through Custom CSS. Check that your Code Injection is intact after the template switch - font import tags should carry over. For custom font loading, our guide to adding custom fonts to Squarespace covers every method.

How to Restore Your Colors

Step 1: Locate Color Settings in Site Styles

In Design > Site Styles, find the color configuration section. Depending on the template, this may be organized as individual color pickers (background, text, heading, link, button) or as a theme/palette system.

Step 2: Enter Your Brand Colors

Enter your brand's exact hex codes for each color setting. If you documented your colors before switching (you should have), reference that documentation. If not, check your brand guidelines, your old site screenshots, or use the browser's color picker on any remaining branded elements.

Step 3: Check Every Section

After setting global colors, check each section individually. Some sections may have section-level color overrides that the new template applied by default. Click each section, open settings, and verify the colors match your brand. Remove section-level overrides if you want the global colors to apply.

Step 4: Check Buttons and Links

Verify button colors (background, text, hover state) and link colors match your brand. These are often configured separately from text and background colors in Site Styles. For button styling, our guide to changing button colors in Squarespace covers every option.

Preventing This Issue in the Future

Document Your Site Styles Before Switching

Before any template switch, screenshot your Site Styles panel and write down every value - font names, hex color codes, font sizes, line heights, and spacing values. This documentation takes five minutes and saves significant time reconfiguring the new template.

Use a Brand Style Guide

Maintain a simple document with your brand's: primary color hex code, secondary color hex code, heading font name and weight, body font name and weight, and standard font sizes. Reference this guide every time you configure or reconfigure your site.

Consider 7.1

On Squarespace 7.1, Site Styles settings persist because there is no template switching. If repeated reconfiguration frustrates you, migrating to 7.1 eliminates this problem. For version comparison, our guide to checking your Squarespace version covers the differences. For Site Styles troubleshooting, our guide to Squarespace Site Styles not working covers common issues and fixes. For design strategies, our Squarespace design tips guide covers color and typography principles. For template switching details, our guide to changing templates on Squarespace covers the full process.

Five Minutes of Documentation Prevents Fifteen Minutes of Frustration

Font and color resets after a template switch are the most predictable issue in Squarespace 7.0 - and the easiest to fix. Document your Site Styles values before switching, re-enter them on the new template, and verify across all sections. The fix is mechanical, not creative - you already know exactly what values you want.

If this reconfiguration cycle frustrates you, 7.1 eliminates it entirely. But on 7.0, five minutes of pre-switch documentation makes post-switch restoration painless.