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.
- 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:
You can also click text on a page to display its tweaks in Site Styles. Click Show All to return to the full list.
Change a font style
Click a font or typography tweak to open its additional options, including font name, size, and letter spacing.
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.
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.
Use the slider or manually enter a font size.
Set the space between lines. Note that a line height of 0em may cause overlapping text, especially on mobile devices.
Set the space between letters. Negative values may cause overlapping characters.
Select None, Capitalize, Uppercase, or Lowercase.
Select None, Underline, Overline, or Line-through.
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.
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.