How to Change Font Color on Squarespace

As a marketer, you know how important it is to have a visually appealing website that is easy to navigate. After all, your website is often the first impression that potential customers will have of your business. Squarespace is an intuitive, beautiful website builder with many excellent Global Design Style Guides. However, sometimes you want an element to stand out from the rest, and the default styles are not enough. 

If you're using Squarespace to build your website, you may wonder how to change the font color of a specific text or block. Perhaps you are emphasizing this part on your website and want it to be different from the rest of the page. Unfortunately, Squarespace limits the customization options, leaving you with a uniformly looking page. This is because the Squarespace designers know the best styles to work cohesively on your site. This allows them to help you create professional-looking websites in minutes. 

But what if you want to make a text stand out? Can you change the font color on Squarespace? Luckily, you can, and it's a relatively simple process. 

Changing Font Color on Squarespace 7.1

If you’re already using Squarespace 7.1, changing a font color is as simple as if you’re editing a Word document. Just highlight the text and select the color from the pop-up editor. Squarespace provides an excellent 1-minute tutorial video about this here.

But if you’re using Squarespace 7.0, the process gets trickier but still doable. Fair warning, though. You’d have to know a bit of CSS and HTML to execute this. 

Changing Font Color on Squarespace 7.0

There are two ways to change the font color in Squarespace 7.0. It all involves understanding CSS and HTML, but don’t be intimidated. These are simple codes, and once you get the hang of HTML and CSS, the customization possibilities are limitless. 

Option 1: Using Markdown Text

When you want to change a specific portion of the text, simply use a Markdown Block rather than a regular text block. 

Here’s a code template you can enter in the Markdown block. 

<div style="text-align:center"><h3><span style="color:#c70000">YOUR TEXT 1 HERE</span> <span style="color:gray">YOUR TEXT 2 HERE</span>

• The <div style="text-align:center"> sets the alignment of your text to center, left, or right. 
• The <h3> tag makes the text into an H3. You can change this to H1, H2, or p (paragraph). 
• The <span style="color:#c70000"> dictates the color of your text. You can look for the specific HEX code of the color you want and put it after the #. 
• Don’t forget the </span> code as this closes the code instruction. If you forget this, the rest of the following text will have the color you specified. 

You can play around with various CSS and HTML codes when using Markdown text. The ones in the example above are the most common ones that involve changing the color. Any text inside the <span> </span> headers will have the color and style you assigned to it. 

Using the format above, you can change anything in your text - from headers, blog text, punctuation, and even certain letters inside a word. It’s a great way to make your content stand out.

Option 2: Using Block Identifier

This option helps change large blocks of text. 

1. Use the Squarespace Block Identifier (free Google Chrome extension) or right-click on a block and click Inspect. This will give you the Block ID number, which starts with ID=block or #block. Make sure to get the correct ID.
2. Copy the block ID and go to Designs>Custom CSS.
3. Copy the code template below:

#block-53c818fd6d3f39517aed p,

#block-53c818fd6d3f39517aed h1,

#block-53c818fd6d3f39517aed h2,

#block-53c818fd6d3f39517aed h3,

#block-53c818fd6d3f39517aed h4 {

color: #ffffff !important;

}

4. Change the values to reflect your block ID, the portions you’d be editing, and the color HEX code.
   • The #block is the beginning of the block ID. 
   • The elements after the block ID (p, h1, h2, etc.) refer to the specific parts of the text. 
   • The color: # is the HEX code. 
5. When using this option, remember to place the comma after each line (except the last one).
6. Keep the page you’re editing open to see if the changes are reflected. If they’re not, either the block ID is incorrect, or there’s an error in the code.

Changing the font color on your Squarespace website is a quick and easy way to give your site a fresh look. By following the options outlined in this blog post, you can easily customize the appearance of your Squarespace site without having to hire a designer. 

To learn more about customizing your Squarespace site, check out the Page Kits blog.