Changing the Newsletter Title Font Size in Squarespace

Newsletter blocks are one of my favorite tools in Squarespace. I often add one in the footer so it appears on each page of the website. I’ve updated this post to include videos on how to change the Newsletter Title Font and Color for Squarespace 7.1. For instructions in Squarespace 7.0, just scroll down ↓

Squarespace 7.1

Newsletter Text Font

In Squarespace 7.1, you no longer have to use Custom CSS to update the Newsletter Title Font. You can select this in Design > Site Styles > Fonts. Click the gear icon of your selected font pack, then click Advanced. Under Newsletter you can choose all the text elements in a newsletter block, including the title, and adjust each one:

Newsletter Text Color

Similarly, in Squarespace 7.1 you can adjust the color of the font elements in the Newsletter Block without any custom code. You can set these in Design > Site Styles > Colors. Go to Section Themes, then select the particular Theme you’d like to edit. Click the pencil icon, then under Newsletter Block set the text and button colors you’d like.

Pro tip: When you are in the Fonts or Colors panel, if you click on the item on your page you’d like to update, the panel refreshes with just the settings for that item.

---

Squarespace 7.0

I’ve posted before about how Squarespace 7.0 uses the body font for the newsletter button rather than the button font and my workaround to change the newsletter button font. In this post, I’ll be showing you how to change the Newsletter Title font size and color.

Here’s a screenshot of a newsletter block I’m using for an opt-in:

Here’s the improved title font styling. With a line of Custom CSS, it calls more attention to the title by changing the color and font size.

Change the Squarespace Newsletter Title Font Size and Color

To change the newsletter title font size and color, just add the following code to Design > Custom CSS.

Note: this code works on Brine family templates. For other template families, YMMV.

/* change newsletter title font size and color */
.newsletter-form-header-title {
    color: #3686a1 !important;
    font-size: 40px !important;
}

Hi! If you want to adjust the line height, you'd just add in an extra line inside the brackets and adjust the 1.1 to change the spacing:

line-height: 1.1em !important; 

Then to target the description font size you’d use this code as well, adjusting the 12px to the size you want.

.newsletter-form-header-description p  {
    font-size: 12px !important;
}

You can change the color hex code to match your brand and play with the font size to get the look you want.