Changing fonts, colors & site styles

How to update your site-wide fonts, colors, spacing, and design settings using Squarespace's Site Styles panel.

Squarespace's Site Styles feature lets you change how your entire website looks — fonts, colors, button styles, and spacing — from one central place. A change here affects every page at once, so it's a powerful tool to use carefully.

Quick summary

Click Website, then Site Styles (or click the paintbrush icon on any page) to change your fonts, colors, and buttons. Changes here affect the whole site. Click Save to apply them, and remember that saved style changes can't be undone. If you're unsure about a change, ask Chykalophia before making it. Only the site owner and administrators can change site styles.

Opening Site Styles

Log in and open your site.

Click Website in the main menu on the left.

Click Site Styles. You can also open any page and click the paintbrush icon in the top-right corner, even while you're editing the page.

Most changes show up in the preview of your site straight away, so you can see the effect before you save.

On an older version 7.0 site the path is different: in the Pages panel, click Home, then Design, then Site styles. The rest of this guide describes version 7.1.

What you can change

On version 7.1, every site has the same style options. The main ones are:

Themes

Themes are ready-made style packs, grouped by mood (such as Professional or Playful). Picking a theme changes your fonts, colors, and buttons in one go, and you can still adjust individual settings afterwards. Because a theme replaces your whole look at once, check with Chykalophia before trying one on a finished site.

Fonts

Squarespace uses font packs: matched sets of fonts applied across the site. Click Fonts to pick a recommended pack, or click the arrow next to Fonts to fine-tune the one you have:

Base size: all text on your site scales from this size
Headings: text formatted as a heading
Paragraphs: body text
Buttons and Miscellaneous: button text and smaller details

To change a font, click one of these, then choose from the Font menu. Squarespace includes hundreds of Google Fonts, plus Adobe Fonts under Additional Fonts.

Stick to 2 fonts maximum

Using too many fonts makes a site look unprofessional. Your Chykalophia designer chose your fonts intentionally. If you want to change them, discuss it with us first to ensure the result stays on-brand.

Colors

Every site uses a palette of five colors. Your page sections then use color themes, which are different combinations of those five colors.

Palette: click the arrow next to Colors, then Edit palette. Changing a palette color updates it everywhere it's used.
Color themes: each palette comes with ten themes. Editing a theme changes every section that uses it, including its background, text, and button colors.

To change a color, click it and use the color picker. You can enter a hex code (like #2D5BE3) for an exact brand color.

Buttons

Control how buttons look across your site. Options include:

Button packs: ready-made button styles to start from
Shape, outline thickness, and padding for your primary, secondary, and tertiary buttons
Button colors, which are set inside each color theme under Colors

Spacing and layout

Site Styles includes a Spacing panel. Its Site Margin setting controls the space between your content and the edge of your site.

The height, width, and padding of a single section aren't set here. You change those on the section itself, while editing the page.

Saving and reverting

Click Save in the top-left corner of the editor to apply your changes.
To undo a change before you save, click the undo arrow, or press Ctrl+Z (Windows) or Cmd+Z (Mac). Repeat to step back further.
Once you've saved, style changes can't be undone. There's no history to roll back to, so you'd need to change each setting back by hand.
Some settings have a reset option that returns them to how they were when your site was created. A reset can't be reversed after you save, either.

Site Styles affects the whole site

Any change you make in Site Styles will affect every page. Visitors won't see it until you click Save, so look over a few different pages in the preview first. If you're planning a bigger redesign, ask Chykalophia: we can try it out on a copy of your site before touching the live one.

Common questions

I changed a color but it only changed in some places. Why?

Your sections probably use different color themes. When you edit a theme, only the sections using that theme change. With the Colors settings open, each section shows a small label naming its theme, so you can see which one to edit. Chykalophia can help if you need a site-wide color change done properly.

I can't find a font I want. Can I use a custom font?

Yes. Squarespace's library doesn't include every Google or Adobe font, but you can upload your own font file (.otf, .ttf, .woff, or .woff2) in Site Styles. You need permission from the font's owner to use it on your site, so check the license first. Chykalophia can set this up for you.

Can I change the style of just one page?

Partly. Site Styles is site-wide, but each section can use a different color theme, so you can give a page its own look by choosing themes for its sections. Font and button settings are mostly site-wide. A full per-page design is a bigger project. Talk to Chykalophia if you need this.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.