Changing the Newsletter Block Button Font

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.

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

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.

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 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .12em !important;
}

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.

Adjusting the code for Squarespace 7.1

If you are using one of the newest Squarespace templates in 7.1, you’ll want to use slightly different code. Here’s code to get you started and you can remove any lines that you don’t need and play around with the values until you get the look you want:

body:not(.button-style-default) .newsletter-form .newsletter-form-button {
    font-family: minerva-modern !important;     
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 1rem 1rem !important;
}

---