Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Changing fonts

This guide walks you through changing fonts on your site, including the font style, size, color, and spacing. Each template comes with default font styles that you can replace in the Site Styles panel.

These steps are for version 7.0. If your site is on version 7.1, visit Version 7.1 style and design options for help.

Watch a video

How fonts work in Squarespace

  • Font menus in Site Styles include all available font options, including 600 Google fonts and 1,000 Adobe Fonts. Scroll down to browse our full library, or use the menu's search field to search for a specific font. Read more about our font selection on our blog.
  • To keep Site Styles menus short, we limit what appears at first, focusing on your recently used fonts and our most popular options. Not all formatting options offered by Google Fonts or Adobe Font are supported by Site Styles.
  • Squarespace organizes text into categories like Body Text, Navigation, and Headings (1, 2, and 3). While specific options vary by template, changes made to a font group apply site-wide. For example, changing the font for your navigation will apply to all navigation text across your site.
  • To create headers in body text, use the Format drop-down menu in the Text Block Editor. After creating headers, you can change the heading styles. To learn more, visit Formatting and styling text.
  • Using consistent fonts creates a unified look for your site, so these options are intentionally limited. To edit fonts beyond the available tweaks, you can add a custom font using our integrations with Adobe Fonts or Google Fonts, or by adding custom CSS.
  • Some fonts may render differently across devices, such as Windows versus Mac.

Find a font tweak

To change a font tweak, open Site Styles. Depending on the template you're using, you'll see different options and names for these font groups. Since Site Styles is organized by section, font tweaks aren't grouped in one category.

Font tweaks can be identified by the title of the group they affect and the small arrow which opens additional options.

If you don't see the text group you want to change, the tweak might live under a different category in Site Styles. You can learn more about your template's style options in Making style changes.

Here's an example of some font tweaks for the Adirondack template:

adirondack_font_options.jpg

You can also click text on a page to display its tweaks in Site Styles. Click Show All to return to the full list.

adirondack_-_display_certain_style_options.jpg

Change a font style

Click a font or typography tweak to open its additional options, including font name, size, and letter spacing.

font_options.jpg

Depending on the specific text and template, you can adjust the typography options listed in the table below. Additional style options and tweaks are available for different fonts and templates.

Font

Select or search for a Google or Adobe Font. You'll see a limited, curated selection of our top Google and Adobe Fonts in this menu. Scroll down and click Show All Fonts to browse our full library, or use the search field at the top of the menu if you already know the name of a font you want to use.

Font Size

Use the slider or manually enter a font size.

Line Height

Set the space between lines. Note that a line height of 0em may cause overlapping text, especially on mobile devices.

Letter Spacing

Set the space between letters. Negative values may cause overlapping characters.

Text Transform

Select None, Capitalize, Uppercase, or Lowercase. 

Text Decoration

Select None, Underline, Overline, or Line-through.

Text Align

Select Left, Center, or Right.

Troubleshooting font issues

Before following these steps, see if the issue is related to your browser. If browser troubleshooting doesn't solve the issue, review this section for other common situations you might encounter when changing fonts.

I copied and pasted text, but it doesn't match my formatting

When copying and pasting text, it's possible to copy over formatting that interferes with Squarespace's CSS. This causes your text to display differently than the settings you've enabled in Site Styles.

To avoid this, we recommend copying and pasting text into a word processing program that eliminates any special formatting, or using a keyboard shortcut to remove formatting.

  • In Windows, press Ctrl + Shift + V when pasting text to remove formatting.
  • On a Mac, press + Shift + V when pasting text to remove formatting.
  • You can also paste text with formatting by clicking the clipboard icon. If you've already entered text, remove formatting by highlighting the text and clicking the remove formatting icon.

remove-formatting.png

My font looks different when I'm logged in

The way that your font renders on your live site can be affected by your domain.

If you connected a third-party domain to your site, contact your domain provider to ensure that you haven't set up masked forwarding. Masking controls the way your domain directs to your site, and can interfere with Squarespace's style settings.

I can't set my font to a specific size 

If you can't set your font to specific px (pixel) size, your template may be using an em value instead. Some templates use em rather than px for font and spacing size. This means its size is relative to the parent text size (most commonly, body text), and will adjust with it.

If you enter a value directly in the number field, you can keep the size scalable with the em value or enter px to keep it fixed instead. However, if your template only uses a px value, don't enter an em value in its place, as this can prevent the font from resizing properly on smaller screens. 

Use custom fonts

If you have a custom font, you can use it on your Squarespace site with our integration with Adobe Fonts. To learn more, visit Using Adobe Fonts with Squarespace.

Was this article helpful?
102 out of 298 found this helpful