Use site styles to edit your site’s fonts, colors, and button design.

With site styles, you can make site-wide design changes, building a consistent look for your content that matches your brand. Your style options depend on your template.

These style options are for version 7.0 sites. Site styles in version 7.1 work differently.

Video on version 7.0 site styles

This video shows how to style your site's fonts, colors, and more.

Make site-wide changes with site styles

In the site styles panel, you can use style options, or "tweaks," to change the look of your site. When the site styles panel is open, you can't edit any content on the page. Depending on your template, tweaks may not appear if they're not relevant to the page open on your site preview.

To open site styles:

1. Open the Pages panel.
2. Click the page you want to style. For site-wide features like footers, open any page. For a specific type of collection item, click a collection page, then open a collection item (like a blog post or product).
3. Click Home at the top of the Pages panel.
4. Click Design.
5. Click Site styles.
6. In the site styles panel, click any tweak to make changes. Page-specific tweaks apply to all pages of that type.
7. To display style tweaks for a specific area on your page, click that area.
8. To return to all available style options, click Show all.
9. After making changes, click Save. Return to the Pages panel and click Edit on a page to continue editing site content.

Change fonts in site styles

In site styles, you can customize your site's fonts, text style, and spacing. Your options depend on your template.

To select and style fonts:

1. Open the Pages panel.
2. Click a page with the fonts you want to change.
3. Click Home at the top of the Pages panel.
4. Click Design.
5. Click Site styles, then click the font tweak you want to change. You can click text on your site preview to display its tweaks.
6. To change the typeface, click the font name, then scroll to browse available fonts. To use a specific Google Font, use the search field to find it. To use Adobe Fonts, scroll to the bottom and click Additional Fonts.
7. Click the font you want to use, then make other style changes. Your options depend on your template and the font.
8. Click Save at the top of the panel.

Can I customize the fonts I choose?

Most font tweaks have additional style options. Depending on your template, the specific tweak, and the font, you can:

• Change the font stroke weight - Click the Weight dropdown and select a weight.
• Change the font style - Click the Style dropdown and select Normal or Italic.
• Change the font size - Use the Size slider or manually enter a size.
• Change the space between letters - Use the Letter Spacing slider or manually enter a pixel width. If you use a negative value, it can cause characters to overlap.
• Transform the text - Click the Text Transform dropdown and select None, Capitalize, Uppercase, or Lowercase.
• Underline or cross out the text - Click the Text Decoration dropdown and select None, Underline, Overline, or Line-through.
• Change the alignment - Click the Text Align dropdown and select Left, Center, or Right.
• Change the space between lines - Use the Line Height or manually enter a height. If you use a line height of 0em, it can cause text to overlap, especially on mobile devices.

Change colors in site styles

Customize your site with a wide-range of color options to personalize your content and brand. Your options depend on your template.

To change colors on your site:

1. Open the Pages panel.
2. Click a page with the colors you want to change.
3. Click Home at the top of the Pages panel.
4. Click Design.
5. Click Site styles, then click the color tweak you want to change. You can click areas or elements on your site preview to display their color tweaks.
6. Clicking a color tweak opens the color picker, which you can use to set the color for that tweak. If you know the HSL code for the color you want, click the text and manually type it in.
7. Optional: Depending on the tweak, you can use the opacity slider to change the transparency.
8. Click outside the color picker to close it, then click Save at the top of the panel.

Video on changing colors

Watch this video for an overview of how to customize your colors in site styles.

Customize button design in site styles

Use site styles to change the color, shape, and text style of buttons on your site. This is a great way to match your calls to action with your site's visual brand. Your options depend on your template.

To style buttons on your site:

1. Open the Pages panel.
2. Click a page with the button you want to change.
3. Click Home at the top of the Pages panel.
4. Click Design.
5. Click Site styles, then click the button tweak you want to change. You can click buttons on your site preview to display their tweaks. For button blocks, there may be separate tweaks for Small, Medium, and Large button block designs. For image block buttons, each layout has separate button styling options.
6. Click Save at the top of the panel.

What styling options do buttons have?

Depending on your template and the button type, you can:

• Choose a button style - Click Button style, then choose Solid, Outline, or Raised. If you choose outline, the text automatically displays as either black or white on hover, depending on the button color.
• Choose a button shape - Click Button shape, then choose Square, Rounded, or Pill.
• Change the background color - Click Button color and set a color.
• Change the button text color - Click Button text color and set a color.
• Change the button font - Click Button font and select a font. Fonts may have additional styling options. Text size tweaks only affect the text on button blocks.

How do I remove Adobe fonts from my site?

To remove Adobe Fonts (formerly Typekit) from your site:

1. Open the Design panel.
2. Click Site styles.
3. Scroll to the bottom of the panel and click Set All to System Fonts.
4. Click Apply System Fonts to confirm.
5. Click Save.

Why can’t I find a font I used in the past?

Google and Adobe occasionally remove fonts from their libraries. If a font is removed, we replace the font with the closest match.

How does my text appear on different devices?

Your text scales based on the size of the browser. Some template families include an option to fine-tune how the text scales.

How can I make the colors I choose accessible?

To make your site accessible, select font colors and background tones that meet WCAG guidelines.

How do I style my cover page?

Cover pages have their own styling panel.