Where to find the font settings in Squarespace

Font changes in Squarespace happen in two places: the Design panel for site-wide fonts, and the text editor for individual blocks. Most readers want the Design panel first, because that changes your heading and body fonts everywhere at once. You reach it by clicking the paintbrush icon in the top left of the editor, then scrolling down to the "Typography" section.

If you want to change only one heading, one paragraph, or one button on a single page, you do that differently — you select the text directly and use the formatting toolbar that appears. Both methods work; the Design panel is faster if you want consistency across your whole site.

Key Takeaways

  • The Design panel (paintbrush icon, then Typography) changes fonts for your entire site at once, including all headings and body text.
  • Squarespace offers about 40 font families built in, and you can add Google Fonts or Adobe Fonts if you have an active subscription.
  • Selecting text directly on a page and using the toolbar lets you change individual words, paragraphs, or blocks without affecting the rest of your site.
  • Font changes take effect immediately on your live site, so you can test different combinations without publishing anything.

Changing fonts site-wide through the Design panel

Open your Squarespace editor and click the paintbrush icon in the top left corner. Scroll down until you see "Typography." You will see sections for "Heading Font," "Body Font," and sometimes "Accent Font" depending on your template. Click on any of these to open a dropdown menu showing available fonts.

Squarespace includes fonts like Montserrat, Lora, Open Sans, and Playfair Display built in. Click the font name to preview it on your site immediately — you do not have to save or publish. If you do not like it, click another one. Once you find one you want, it applies to every heading or body text on your site that uses that style.

Some templates also let you adjust font size, line height, and letter spacing in the same panel. These controls appear below the font name dropdown. Changing them here affects the whole site, so test on a page with a lot of text to see how it looks.

Changing fonts on a single page or text block

Click directly on the text you want to change. A toolbar appears above or below the text with formatting options. Look for a dropdown that shows the current font name — it usually appears on the left side of the toolbar. Click it to see available fonts and select a new one.

You can select a single word, a whole paragraph, or an entire text block before changing the font. Only the text you selected will change. This method overrides the site-wide font settings from the Design panel, so use it when you want one section to stand out — a tagline in a different font, a quote in italics, or a call-to-action button in bold.

If you change your mind, select the text again and click the font dropdown. You will see a "Reset" option at the top that removes your custom choice and goes back to the site-wide font.

Adding custom fonts from Google Fonts or Adobe Fonts

Squarespace's built-in fonts cover most needs, but if you want something specific, you can add Google Fonts for free or Adobe Fonts if you have an active Adobe Creative Cloud subscription. To use Google Fonts, go to the Design panel, click Typography, and look for a "Custom Fonts" or "Add Font" option — the exact label depends on your template.

Click that option and search for the Google Font you want by name. Once you find it, click to add it to your site. It will then appear in your font dropdown menus alongside the built-in options. Google Fonts are free and do not require any account or subscription.

Adobe Fonts work the same way if you have an Adobe account linked to Squarespace. If you do not see the Adobe Fonts option, you may need to connect your Adobe account first through your Squarespace account settings.

Why fonts look different on mobile than on desktop

Squarespace lets you set different font sizes for mobile and desktop in the Design panel. If your heading looks huge on a phone but right on a computer, this is why. Open the Design panel, find Typography, and look for a phone icon next to the size controls. Click it to adjust the mobile size separately.

Font families themselves stay the same across devices — Montserrat on desktop is still Montserrat on mobile. But the size, line height, and spacing can all be different. This is normal and often necessary, because a 48-pixel heading that looks good on a desktop screen is too large to read on a 5-inch phone.

Common font problems and how to fix them

If a font you selected does not appear on your live site, the most common cause is that the font did not finish loading. Wait a few minutes and refresh your browser. If it still does not appear, check that you added it correctly — go back to the Design panel and verify the font name matches what you selected.

If text looks blurry or hard to read, the font size is usually too small or the line height is too tight. Increase the size by 2 to 4 pixels or increase line height to 1.6 or higher. Test on both desktop and mobile, because a font that reads fine on a large screen can become illegible on a phone at the same size.

If you changed a font and want to undo it, select the text and click the font dropdown, then choose "Reset." This removes your custom choice and returns to the site-wide font. If you changed the site-wide font itself and want to go back, you can click any previous font in the dropdown — Squarespace shows your recent choices at the top.

Frequently Asked Questions

Can I use fonts that are not in Squarespace's dropdown?

Yes, through Google Fonts or Adobe Fonts. Squarespace does not let you upload custom font files directly, but Google Fonts has thousands of free options and Adobe Fonts has thousands more if you subscribe. Both integrate directly into the font dropdown once you add them.

Do I have to change fonts on every page separately?

No. Changes in the Design panel apply to your entire site at once. Only use the text editor method if you want one specific block or page to look different from the rest. Site-wide changes are much faster.

What happens to my fonts if I change my Squarespace template?

Your font choices stay with you, but they may look different because templates have different layouts and spacing. Test your site after switching templates to see if your fonts still work well. You can adjust them in the Design panel if needed.

Can I make different pages use different fonts?

Not through the Design panel — those changes apply everywhere. But you can select text on individual pages and override the site-wide font using the text editor toolbar. This works for one page at a time, so it is slower than a site-wide change but gives you more control.

Why does my font look different in the editor than on the live site?

The editor sometimes renders fonts differently than the live site, especially if the font is still loading. Refresh your browser and wait a minute for fonts to fully load. If it still looks different, check your browser's zoom level — if you have zoomed in or out, fonts will appear larger or smaller than they actually are.