When we see a Squarespace font we like, we just have to use it. But how do you change your current font styles in Squarespace? Well, luckily, this is simple to do, you just need to follow a few key tips. Keep reading!

How to change fonts in Squarespace

Customizing your website’s fonts is a great way to make sure it reflects your individual style and stands out. Here’s how to do it:

Open the Pages panel.
Click the paintbrush icon (Site Styles).

Click Fonts. You can then change the fonts of each of the following by clicking into their section, and then changing the font family:

Headings: You can change the font for all headings types (H1, H2, H3, & H4).
Paragraphs: You can change the font for all paragraph types (P1, P2, & P3).
Buttons: You can change the font for all button types (Primary, Secondary, & Tertiary).
Miscellaneous: You can change the font for all miscellaneous text (text that isn’t a heading, paragraph, or button).

You can then update which elements use each text type in Assign Styles.

Font customizations

After you’ve chosen your font family, there are plenty of other customizations you can make to your font of choice. You can change the following:

Font size: You can change each of the Heading (H1, H2, H3, & H4), Paragraph P1, P2, & P3), and Button (Primary, Secondary, & Tertiary) subtypes and every type of miscellaneous text.
Font weight: Font weight controls how bold or light the font appears. You can usually select weights ranging from 100 (thin) to 700 (extra bold).
Font style: The font style lets you switch between normal and italic styles.
Font line height: Line height controls the vertical spacing between lines of text.
Font letter spacing: The letter spacing increases or decreases the horizontal space between characters for a more open or condensed look.
Text transform: Text transform allows you to control the case of your text automatically to convert all letters to uppercase, convert all letters to lowercase, or capitalize the first letter of each word.

How to change the font style of one text block

If you want to use a different font for one text block without changing the sitewide font for that text type (headings, paragraphs, etc.), you can, although you’ll need to use a little CSS to do it.

Identify the text’s block ID. You can either use the Inspect tool in Chrome (right click -> inspect) or use this great plugin by Will Meyers, Squarespace ID Finder.

Paste the following code in your CSS panel (updating the font settings to what you want).

#block_id
{ 
font-family: cursive; 
font-style: italic; 
font-size: 20px;
}

change the font style of one text block — BEFORE & AFTER

How to change the font color in Squarespace

There are three main ways to change the font colors in Squarespace — changing the text block’s settings, changing the color theme settings, or using CSS.

Change the text block’s settings

In sections that use Fluid Engine, you can easily change the color of text using the block settings. Here’s how:

Click the text block.
Click the color icon.
Change the text color to a color in your site’s palette or change it to a custom color.

Change the color theme settings

You can also change the color of your text by changing the settings of the color theme the section is using.

Hover over the section and click Edit Section.
Click the Colors tab.
Click the edit icon of the color theme the section is using.

Change the color of the text type you want to change.

*This will affect all the sections that use the same color theme, so make changes carefully.

Use CSS

Since Squarespace makes changing the color of your text pretty easy (especially in Fluid Engine), you usually won’t need to use CSS to change text colors. However, knowing how to do it can’t hurt. Here’s how:

Identify the text’s block ID.
Paste the following code in the Custom CSS panel (change the hex code to the color you want).

#block_id {color: #0047AB;}

FAQ

What are the right fonts for me?

It depends on the vibe you’re going for. Sans-serif fonts tend to be clean, minimalist, and modern. If you're aiming for something a little more traditional or formal, a serif font might work better. Just make sure the fonts you choose are easy to read across all devices and that it aligns with your brand's personality.

Can I use any font I want on Squarespace?

Not exactly any font, but Squarespace’s font collection includes 600 Google fonts and 1,000 Adobe fonts, so you have plenty of options! But if you want to use a custom font, you can add it with a bit of code.

Can I use different fonts on different pages?

Not directly through the Style Editor. If you want different font pairs on specific pages, you’ll need to use custom CSS to pull it off.

Want to learn more?

Hopefully, now you see that adding an image carousel in Squarespace is pretty simple! But do you need more help? You can learn more about Squarespace, blogging, copywriting, and more on the blog! Here are some of our favorites!

How to write a service page

Blogging vs social media: Which is better?

Using Squarespace as a Linktree alternative

How to add a testimonial slider in Squarespace

Quotes for small business owners

40+ ways to increase your blog traffic