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

This applies to Squarespace 7.0 template switches. On 7.1, there is no template switching. Site Styles settings persist because you are redesigning the same site, not switching to a different template system. Squarespace includes Site Styles on every plan. Use coupon code OKDIGITAL10 for 10% off any Squarespace plan.

What Carries Over and What Doesn't

Before you start reconfiguring, it helps to know exactly what Squarespace preserves through a template switch and what it resets. This sets the right expectations so you know where to focus your effort.

What transfers to the new template:

• All your content: pages, text, blog posts, products, and images
• Code Injection scripts and tags (Google Analytics, font imports, etc.)
• Custom CSS code (the code itself stays, though selectors may break)
• Form submissions and connected accounts
• Your domain and URL structure

What does NOT transfer:

• Site Styles values: font families, sizes, weights, color hex codes, spacing
• Section-level design overrides (background colors, overlays set per-section)
• Template-specific CSS class names (your old Custom CSS selectors may no longer match)
• Any design settings unique to the old template's style system

Put simply: your words and files are safe. Your visual configuration is not. That's everything you need to fix after a switch.

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, as 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, 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.

What If You Don't Have Your Old Hex Codes?

Not everyone writes down their color values before switching templates. If you don't have your hex codes handy, you still have several ways to recover them.

Start with screenshots. Check Google Photos, iCloud, or any cloud storage where you might have saved images of your old site. Open a screenshot in any image editor or browser-based color picker tool, hover over the color you want, and copy the hex code it returns. This works well for brand colors that appear prominently in headers or buttons.

Check your brand materials. Business cards, social media graphics, email headers, and printed flyers all use your brand colors. If a designer created these, they likely used your exact brand palette. Ask for the original design files or check the PDF versions, which often let you extract color values.

Use the Wayback Machine. The Internet Archive (web.archive.org) crawls and saves snapshots of websites over time. Search for your domain and find a cached version from before the template switch. Open Chrome DevTools (right-click any element, choose Inspect), click the color swatch next to any CSS color property, and the built-in color picker will show you the exact hex value. This method works even if your site has been completely restyled since.

If all else fails, treat the switch as an opportunity to define your colors properly from scratch. Pick 1-2 primary colors and 1-2 neutral tones, document them in a simple brand style guide, and apply them consistently. A fresh, intentional palette is often better than an undocumented one you've been guessing at for years.

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.

Complete Template Switch Checklist: What to Check Before and After

The fastest way to handle a template switch on Squarespace 7.0 is to document everything before switching, then restore systematically after. This checklist gives you a structured approach that covers every setting that does not transfer.

Before You Switch: Document These Values

• Heading font: Name, weight (e.g., Playfair Display, 700 Bold), size
• Body font: Name, weight, size, line height
• Primary brand color hex code (e.g., #2b4c7e)
• Secondary and accent color hex codes
• Button background and text color
• Link color
• Custom CSS: Screenshot or copy the full contents of Design, Custom CSS
• Navigation structure: Screenshot your Pages panel showing all navigation order
• Code Injection content: Screenshot or copy header, footer, and lock page code
• Section-level overrides: Note any sections with custom background colors or overlays

After You Switch: Restore in This Order

• 1. Set global fonts in Design, Site Styles. Do this before anything else so you can see how the new template renders your typography.
• 2. Set global colors including background, text, heading, link, and button colors. Use the hex codes you documented.
• 3. Check navigation. Open the Pages panel and verify all pages are in the correct section (Main Navigation vs. Not Linked). Restore the original order by dragging pages.
• 4. Update Custom CSS selectors. Review your saved Custom CSS. The old class names may not match the new template. Use browser DevTools to find the new class names and update accordingly.
• 5. Verify section overrides. Click each section on every page, open section settings, and confirm colors and overlays match your brand.
• 6. Check Code Injection. Confirm all scripts and tags in Settings, Advanced, Code Injection are intact and still functioning correctly.
• 7. Test on mobile. Template switches frequently change how pages render on small screens. Review every key page on your phone before announcing the update to visitors.

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 also 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.