Customize your site’s text style, size, color, and spacing.
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 site styles.
Watch a video
How fonts work in Squarespace
When reviewing the font menu, please note:
- Our font collection includes 600 Google fonts and 1,000 Adobe Fonts. This collection doesn't include every available Google or Adobe font. 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.
When choosing your fonts, keep in mind:
- Squarespace's font packs are designed to give your site a cohesive style without needing to manually choose every font setting. Font packs use Google fonts that are widely available, helping you maintain a consistent brand across platforms.
- Font styling options are intentionally limited to maintain consistency throughout your site. 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.
- 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 dropdown menus.
- Occasionally, Google and Adobe remove fonts from their libraries. If you're using a font that's been removed and switch to a different font, you won't be able to switch back. Instead, we replace the font in our library with the closest match so you can use something similar.
When using fonts on your site, please note:
- 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 dropdown menu in the text block Editor. After creating headers, you can change the heading styles. To learn more, visit Formatting text.
- Changing text format in the text toolbar overrides the styles set for that text area in site styles. For example, if you change a blog post’s excerpt text to Heading 1 with the text toolbar, then edit the font or size of blog excerpts in site styles, the text you changed will continue following Heading 1 styles.
Tip: For help choosing the best fonts for your site, visit Choosing the right fonts and colors.
How text scaling works in Squarespace
Scaling text is when the size of your text changes to fill a certain area of your site. Our responsive design ensures that text fits any screen size. How your site's text scales depends on your site's version.
Your text scales based on the font's base size. You can use text scaling to fill a text block regardless of the font's settings.
Your text scales based on the size of the browser. Some template families include an option to fine tune how the text scales.
Find a font tweak
Font tweaks work differently depending on your site's version.
To change all fonts site-wide:
- While editing a page, open site styles, then click > next to Fonts.
- 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.
- Click a new font pack to preview it on your site.
- Click Back to return to the Fonts panel and set the font's Base Size. All other text scales relative to this size.
- Your changes will stay in place while you edit other page content. To save your changes, click Save. To stop editing, click Exit.
If you don't want Google Fonts or Adobe Fonts (formerly Typekit) to load on your site, select one of our built-in font packs:
- Under Sans-serif, select Helvetica Neue
- Under Serif, select Georgia
- Under Mixed, select Verdana
To change a specific font tweak:
- In the Fonts panel, click Assign Styles.
- Find the specific text group you want to change, like Title or Button, then click it to open all tweak options for that group. You can also click any text on the page preview to display its tweak options.
- Click the dropdown 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.
- 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 want Google Fonts or Adobe Fonts (formerly Typekit) to load on your site, click Set All to System Fonts at the bottom of the site styles panel.
If you can't find the text group you want to change, 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.
Find a specific font
Font searching works differently depending on which version of Squarespace your site is on.
To use a specific Google Font, search for it in the Browse all fonts option:
- Open the Site styles panel, then click > next to Fonts.
- Click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
- Click the font name
- Scroll to browse the available fonts, or enter the font name in the Search fonts field at the top of the panel. To browse Adobe Fonts, click Additional Fonts at the bottom of the list.
- Your changes will stay in place while you edit other page content. To save your changes, click Save. To stop editing, click Exit.
Tip: The Miscellaneous category applies to most text that's not a heading or regular paragraph text, like product prices, Menu Block navigation, and other content metadata.
To use a specific Google or Adobe Font, use the search field within a font tweak to find it:
- Open the Design panel, then click Site styles.
- Click the font tweak you want to change, then click the dropdown menu next to the font name.
- Scroll to browse the available fonts, or enter the font name in the Search Fonts field at the top of the menu.
- 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, Google and Adobe 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:
- Open the Site styles panel, then click > next to Fonts.
- Click the text type you want to change: Headings, Paragraphs, Buttons, or Miscellaneous.
- The font name appears at the top. Use the styling and various size options to change the style.
- Your changes will stay in place while you edit other page content. To save your changes, click Save. To stop editing, click Exit.
Adjust the styles as listed in the table below.
Tip: To change the color of your text, change your site-wide or section colors. In a text block, you can also use the text toolbar.
|
Style name |
Options |
|
Weight |
Make the text thicker or thinner. |
|
Style |
Set the text to normal, bold, italic, or other formats, depending on the font. |
|
Line height |
Change the space between lines of text. |
|
Letter spacing |
Change the space between letters. |
|
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. You can also change the text size in individual text blocks using the text toolbar. |
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.
- 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.
- Custom Adobe Fonts aren't supported in version 7.1, but you can add fonts to version 7.1 with custom CSS. Keep in mind, this is an advanced option that falls outside the scope of our support.
Step 1 - Create a web project and add fonts
To add your custom fonts to version 7.0 sites, 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.
- In your Adobe Fonts account, click My Adobe Fonts in the top-right corner.
- Click Web Projects, then find the project you want to add to Squarespace.
- 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.
- Open the Developer tools panel.
- Click External API keys.
- Scroll down to the Adobe Fonts Project ID box.
- Paste the Project ID you copied from Adobe into the box.
- 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, determine 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.
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.