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.
How fonts work in Squarespace
- The Squarespace font library includes 600 Google fonts and 1000 Typekit fonts.
- Font menus in the Style Editor include a curated selection of popular options. Scroll down to select from the shortened list, click Show All Fonts to browse our full library, or use the menu's search field to search for a specific font.
- Squarespace organizes text by font groups like Body Text, Headings (1, 2, and 3), and Navigation Text. While specific options vary by template, changes made to a font group apply site-wide. For example, changing the font style for Body Text will change it on all pages, and changing the font style for Heading 1 will change all Heading 1s across your site.
- To create headers in body text, use the Format drop-down menu in the Text Block Editor. After creating headers in Text Blocks, you can change the heading styles by following this guide.
- 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 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.
You can also click text on a page to display its tweaks in the Style Editor.
Click Show All to return 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.
|Font Size||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.
|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.|
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 you can use press Ctrl + Shift + V when pasting text to remove formatting associated with the text.
On the Mac you can press Command + Shift + V when pasting text to remove formatting associated with the text.
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.
For more help formatting text in a Text Block, visit Using the Text Block.
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.