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. All sites start with default font styles that you can change and adjust in the Design panel.

Watch a video

How fonts work in Squarespace

  • Font menus include all available font options, including 600 Google fonts and 1,000 Adobe Fonts. Scroll to browse our full library, or use the menu's search field to search for a specific font. 
  • To keep 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 Fonts are supported by Squarespace.
  • Most changes to a font category (like Headings and Paragraphs) apply site-wide. For example, changing the font for your Heading 1 text will apply to all text set as Heading 1 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.
  • Some fonts may render differently across devices, such as Windows versus Mac, or on iOS versus Android. Different browsers may also render fonts differently in some cases, like in drop-down menus.
  • Occasionally, Google and Adobe remove fonts from their libraries. Any site text currently using that font won't change, but if you switch to a different font, you can't switch back. Instead, we replace the font in our library with the closest match so you can use something similar.
  • 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 with CSS. In version 7.0, you can add custom Adobe Fonts.

Find a font tweak

Font tweaks work differently depending on which version of Squarespace your site is on

To change all fonts site-wide:

  1. In the Home Menu click Design, then click Fonts.
  2. Click Switch on the current font pack to see all available font packs. Click Sans-serif, Serif, or Mixed to see different font packs for each style. 
  3. Click a new font to preview it on your site, then click Save to apply it. 
  4. Click Back to return to the Fonts panel and set the font's Base Size. All other text scales relative to this size.

To change a specific font tweak:

  1. In the Fonts panel, under Global Text Styles, click Assign Styles
  2. Find the title of that font group, like Title or Button, then click the title to open all tweak options for that group. You can also click any text on the page preview to display its tweak options. 
  3. Click the drop-down menu next to the tweak name to assign a new font style. To customize it even further, click Custom, then use the other options that appear. 
  4. Click Show All or Back to return to the full list.

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. Font tweaks can be identified by the title of the group they affect and the small arrow that opens additional options.

If you don't see the text group you want to change, you can learn more about your template's style options in your template's guide. 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

Find a specific font

Font searching works differently depending on which version of Squarespace your site is on.

To use a specific Adobe or Google Font, search for it in the Browse all fonts option.

  1. In the Home Menu, click Design, then click Fonts
  2. Under Global Text Styles, click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
  3. Click Family.
  4. Click Browse All Fonts.
  5. Scroll to browse the available fonts, or enter the font name in the Search fonts field at the top of the panel.
  6. Click Save to apply your changes.

To use a specific Adobe or Google Font, use the search field within a font tweak to find it.

  1. In the Home Menu, click Design, and then click Site Styles
  2. Click the font tweak you want to change, then click the drop-down menu next to the font name. 
  3. Scroll to browse the available fonts, or enter the font name in the Search Fonts field at the top of the menu.
  4. Click the font you want to use, then click Save at the top of the panel to apply your changes.

If you don't have a font in mind, Adobe and Google have resources for searching and previewing fonts on their platforms:

When you find a font you like, search for it in Squarespace. Note that some fonts might not be available. 

Style a font

Font styling works differently depending on which version of Squarespace your site is on.

To style your fonts:

  1. In the Home Menu click Design, then click Fonts.
  2. Under Global Text Styles, click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
  3. Family will list the font. Use the style and various size options to change the style.
  4. Click Save to apply your changes.

Adjust the styles as listed in the table below.

Tip: To change the color of your text, change your site-wide or section colors. 

Style name

Options

Weight

Make the text thicker or thinner.

Line height

Change the space between lines of text.

Letter spacing

Change the space between letters. 

Style

Set the text to normal, bold, italic, or other formats, depending on the font.

Text transform

Capitalize some, all, or none of the text. This tweak only applies to certain fonts.

Size

Make the text larger or smaller. Each text type features one or more size options. For example, Headings includes sliders for Heading 1, Heading 2, Heading 3, and Heading 4 formatting in the Size section.

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.

Tip: To change the color of your text, use the color tweak for that text type in Site Styles. Learn more in Changing colors

Tweak name

Options

Font

Select or search for a Google or Adobe Font. You'll see curated selections towards the top of the menu. Scroll down to browse our full library, or use the search field at the top of the menu if you 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.

Add a custom Adobe Font (version 7.0 only)

If you have a custom font, you can add it to your Squarespace version 7.0 site using our integration with Adobe Fonts. Custom Adobe Fonts aren't supported in version 7.1.

  • This process replaces the Adobe Fonts options in the Site Styles menus with the fonts in your custom project. Squarespace's Adobe Fonts won't be available for use while your custom Adobe Fonts project is enabled.
  • Custom fonts are available with an Adobe Creative Cloud subscription. Before subscribing, choose a plan that includes Adobe Fonts.

Step 1 - Create a web project and add fonts

To add your custom fonts to Squarespace, you’ll first need to create a web project in Adobe. Log into your Adobe Fonts account, then follow their steps for creating a web project

After creating your web project, you’ll see your customized HTML embed code. You won't need it, so don't add it to your site. Instead, use the next step to get the web project ID, which is shorter.

Step 2 - Add your custom fonts to Squarespace

When your web project includes all the fonts you need, add the project to your Squarespace site using the project ID.

  1. In your Adobe Fonts account, click My Adobe Fonts in the top-right corner.
  2. Click Web Projects, then find the project you want to add to Squarespace.
  3. Copy the Project ID, which is a string of letters and numbers above the embed code. Ensure that you copy your unique Project ID, and not the one shown in the example. 

adobe_-_project_ID.jpg

  1. Log into your Squarespace site.
  2. From the Home Menu, click Settings, then click Advanced.
  3. Click External API Keys.
  4. Scroll down to the Adobe Fonts Project ID box.
  5. Paste the Project ID you copied from Adobe into the box.
  6. Click Save.

Step 3 - Use your Adobe Fonts

After adding Adobe Fonts, you can apply them to text on your site. The fonts in your web project replace the built-in Adobe Fonts in Site Styles. To quickly find a custom Adobe Font, search for it by name in the Search box.

Managing changes to your fonts

  • If you change your Adobe Fonts, republish to show these changes on Squarespace. To learn more, visit Adobe's documentation.
  • If Adobe Fonts removes a font you're using from their collection, the font will still load on your site. However, you won't be able to apply it to new text or switch back to it if you change it as it will no longer appear in Site Styles.

I see an "Unsupported Fonts" message in Site Styles

You'll see this message if your site is using a font that Adobe Fonts retired. When the font is no longer supported, we'll replace it on Squarespace with the closest match available. Review the style sections listed in the error to approve or change the replacement font.

Adobe Fonts will also remove any retired fonts from your Adobe Fonts page.

My custom Adobe fonts aren't displaying on my site

If some special characters aren't displaying properly, edit the Web Project and select All Characters before adding the Project ID to Squarespace. 

If none of your fonts are displaying, check your site for any JavaScript. If you ever used Adobe Fonts' JavaScript method to add fonts to your site, your fonts may not load properly. Remove the JavaScript and follow the steps above to add your Adobe Fonts.

Where to go for support

If you're having trouble adding your Adobe Fonts Project ID, or if Adobe Fonts aren't appearing in your site, contact us and we can help you troubleshoot. For all other questions about using Adobe Fonts, contact them or visit their documentation.

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 first 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 without formatting by clicking the clipboard icon. If you've already entered text, remove formatting by highlighting the text and clicking the remove formatting icon.

paste_and_clear_formatting_icons.jpg

My font looks different when I'm logged in

The way that fonts render 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 site may be using an em or rem value instead. 

  • All sites on version 7.1 use rem values for font sizes. This means its size is relative to the base font size. To change a font's rem value, use the slider or click the current value and manually enter a new value. To change the base font size, adjust the Base Size on the font pack. 
  • For sites on version 7.0, some templates use em rather than px for font and spacing size. 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.

My font is hard to read on mobile devices

Font weights below 100 may look very light or dim on smaller mobile devices. To keep your text visible on all devices, open Site Styles and ensure the font weight is higher than 100.

Was this article helpful?
117 out of 384 found this helpful