In this tutorial, we share a step-by-step guide to implement a custom font to the Squarespace Newsletter Block — including the newsletter heading, description, name/email field and button.

Squarespace has an extensive library of fonts to choose from for your website. You can find the library by navigating to:

Site Styles > Fonts > Headings or Paragraphs > Family > Browse fonts here

If your brand fonts are not included in Squarespace, you can add a custom font to your website in a few easy steps. To update the universal font on your website, be sure to check out this blog post.

Follow along this tutorial to learn how to integrate custom fonts to your Squarespace 7.1 Newsletter Block.

Step 1: Upload your font to Squarespace

From the Squarespace dashboard, go to:
Website > Scroll down to Website Tools > Custom CSS
Click “Custom Files”
Click “Add images or fonts”
Select the font file you’d like to import to Squarespace
Note: files should end with OTF, WOFF or TFF

Step 2: Copy/paste CSS

Copy and paste the code in Custom CSS:

// CUSTOM FONT

@font-face {

font-family: 'FONTNAME';

src: url();

}

Notes:

You may skip this step if you have previously implemented a custom font to your website
Repeat this step if you’d like to include a secondary font to your Newsletter Block

Step 3: implement the font

Replace 'FONTNAME' with your font name of choice. This does not have to match the real name of the font — it can be anything you want.

Then, click between the parentheses of src: url( ); so your cursor is sandwiched between the two.

When your cursor is sandwiched between the two parentheses, navigate back to “Custom Files”, click on the font you previously uploaded and it will automatically populate a URL for the custom font.

It should look like this:

Now that the font is active, it’s time to apply it to our newsletter heading, description and button.

OPTION 01:

Update Newsletter Block heading text

Copy/paste the following CSS:

// CUSTOM NEWSLETTER HEADING FONT

h2.newsletter-form-header-title {
    font-family: 'FONTNAME' !important;
}

Replace 'FONTNAME' with the font name you chose at the beginning of step 3.

OPTION 02:

Update Newsletter Block description text

Copy/paste the following CSS:

// CUSTOM NEWSLETTER DESCRIPTION FONT
.newsletter-form-header-description {
    font-family: 'FONTNAME' !important;
}

Replace 'FONTNAME' with the font name you chose at the beginning of step 3.

OPTION 03:

Update Newsletter name/email form fields text

Copy/paste the following CSS:

// CUSTOM NEWSLETTER NAME/EMAIL FIELDS FONT

.newsletter-block .newsletter-form-field-element::placeholder {
    font-family: 'FONTNAME' !important; 
}

Replace 'FONTNAME' with the font name you chose at the beginning of step 3.

OPTION 04:

Update Newsletter block button text

Copy/paste the following CSS:

// CUSTOM NEWSLETTER BUTTON FONT
.newsletter-block .newsletter-form-button {
font-family: 'FONTNAME' !important;
}

Replace 'FONTNAME' with the font name you chose at the beginning of step 3.

It should look like this:

Optional: Customize font style

To customize your font size, letter spacing & line height, navigate to:

Site Styles > Fonts > Assign Styles

Find “Newsletter Block” and select text style (heading, description, field, etc.)

Select “Custom” and adjust as necessary

Don’t forget to save all changes!

All set!

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace subscription

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!