Changing the Newsletter Block Button Font

Changing the Newsletter block button font in Squarespace

As, I mentioned in another post on Newsletter Blocks, most websites I create include one of these . One pet peeve of mine is the default font on the Newsletter button font. Squarespace uses the body font for the newsletter button rather than the button font, which just seems odd. I typically add a line of code to adjust the text on the Newsletter block so it matches the rest of the site. Even in templates where the font is the same for Body text and Button text, like my example below, it’s still a good idea to adjust the font weight and letter spacing.

Here’s a recent client site in progress. The original Subscribe button isn’t terrible, but it could be better.

 
example of Newsletter block button style in squarespace
 

Here’s the improved button styling. With just a little CSS, we can make the site look much more polished.

 
example of Newsletter block button style in squarespace
 
 

Change the Newsletter Block Button Styling

To increase the font for the newsletter post-submit message, just add the following code to Design > Custom CSS.

Custom CSS Menu in Squarespace

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

/* change newsletter button font to match site */
.newsletter-block .newsletter-form-button {
    font-family: minerva-modern;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .12em;
}

Check your Style settings in Design > Site Styles to plug in your own site’s button font, size, weight, and spacing. Then save your code. You’ll be able to see the new button style. An easy way to elevate your site design.

YOU SHOULD ALSO CHECK OUT:


If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your site and how you used the CSS.