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 Style Editor.
Watch a video
How fonts work in Squarespace
- Font menus in the Style Editor include all available font options, including 600 Google fonts and 1000 Typekit fonts. Scroll down to browse our full library, or use the menu's search field to search for a specific font.
- 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 integration with Typekit or Google fonts, or by adding custom CSS.
Note: Some fonts may render differently across devices, such as Windows versus Mac.
Step 1 - Go to the Style Editor
In the Home Menu, click Design, and then click Style Editor.
Step 2 - Find the font tweak
Depending on the template you're using, you'll see different options and names for these font groups. Since the Style Editor 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 the Style Editor. You can learn more about your template's style options in Making style changes.
You can also click text on a page to display its tweaks in the Style Editor. Click Show All to return to the full list.
Step 3 - Change the 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 these typography options:
Select or search for a Google or Typekit font. You'll see a limited, curated selection of our top Google and Typekit 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: 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.
Note: Additional style options and tweaks are available for different fonts and templates.
Note: Some templates use an em value rather than px (pixels) 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.
Troubleshooting font issues
This section reviews some 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 appear different than the settings you've enabled in the Style Editor.
To avoid this, we recommend copy 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.
Use custom fonts
If you have a custom font, you can use it on your Squarespace site with our integration with Typekit. To learn more, visit Using Typekit with Squarespace.