How to Customize the Font on Your Mailerlite Embed Form
Blog Overview: An overview of using the Inspector tool and Squarespace CSS panel to modify the native Mailerlite font styles attributed to your embedded forms on Squarespace.
Last Updated August 1, 2023
Studies show that email marketing gets the highest return on investment among marketing channels. So, it’s worth spending time to nurture your audience through automated campaigns and weekly or monthly value-packed content.
The next question is likely - which email provider to use?
There are so many email providers to choose from that you might be left a little confused. From native Squarespace Campaigns to Mailerlite, ConvertKit, Mailchimp and the beautiful Flodesk, there is a perfect fit for everyone. Choosing which is for you is a different post, not yet written.
Tip: Check out my resources page for a Flodesk discount!…if you’re not feeling Mailerlite.
If you’ve chosen Mailerlite, this post is for you.
Mailerlite has quite a few font styles within its dashboard; ideally, you’ll choose one that represents your brand best. For Campaigns & Automation that you send to your newsletter subscribers, that’s OK as there’s surrounding branded text.
However, if you plan on embedding a form on your website with their provided code, you’ll spend hours setting up your forms, automation and pop-ups in Mailerlite, only to head over to Squarespace to embed the code for your forms and realize the Mailerlite fonts stick out like a sore thumb.
Not what you were hoping for, right?
Read on to learn how to customize these forms to stay on-brand.
Using the Mailerlite & Newsletter Block Integration
You CAN use the in-built Squarespace Newsletter block and the Mailerlite integration. When you use this integration, the Squarespace newsletter block will send any subscribers to one selected Mailerlite Group using a Google Sheet and a code block. You will need a Business Plan or higher to use this integration.
Learn more in the blog post from Mailerlite, How to Integrate Mailerlite with Squarespace.
Using CSS to Change Your Mailerlite font to Your Squarespace Font on Embedded Mailerlite Forms
Using the selector tool and css, the embed form went From this:
This embed form uses the Mailerlite font, Work Sans, in the name, email and button fields.
TO THIS:
The form after CSS uses Arboria, the font on my website, in the name, email and button fields (at time of post)
First, You Need to Know How to Use the Inspector Tool to Find Your Mailerlite Selector
To change the font Work Sans which I selected in Mailerlite to the font I use on my website, we need custom code. To find out what selectors we need to identify in our code, we need to use the Inspector Tool.
Here is a visual of the Inspector tool in action. Review the video below for a full explanation.
Below is a ‘quick’ 10 min video showing you how to access the tool and how to identify the selectors you will need to paste into your CSS panel.
I have the code pasted below that I used, however depending on the type of form that you are using and the Mailerlite code it attributes (#mlb….), you may need to adjust the code.
Tip: Forward to 2 mins 50 seconds if you want to get right to the selector you need
important Update August 1, 2023:
Mailerlite has added the !important tag to their font faces so the button selectors below will not work on their own. You will have to preface all the code with the Block ID of your form section. See the post Six Must Have Codes for Squarespace for further information on using the Squarespace Block ID Finder if you have never used it.
My font selections are now different, however, the coding process remains the same.
Before proceeding: Download the Squarespace ID Finder Extension
Download the Squarespace ID Finder tool in Google Chrome Extensions. This tool is life-changing if you want to save time from using the Dev Inspect tool. Once you download this, ensure it’s pinned to your toolbar for easy access in the future.
Your code will look like the below with the Block ID instead of just the codes provided below.
Ensure you have your opening bracket after the block ID and a closing bracket after the last Mailerlite CSS.
#blockID {
#mlb2-5436272.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
font-family: arboria !important;
//* adjust button font *//
#mlb2-5436272.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
font-family: arboria !important;
letter-spacing: .07em !important;
font-weight: 500 !important;
padding: 1em 1.5em !important;
}
}
Next, Apply the CSS to Change your Font
Now that you know how to find your Mailerlite selector, you’re going to head over to your custom css panel and paste the code.
As a reminder, you’re going to your Dashboard > Design > Custom CSS > pasting the code below (& customized as in the video). You can also hit / on your keyboard and type CSS as a shortcut.
Don’t forget to add the block ID before your CSS code as per the latest update if you’re finding that the button font is not changing!
example: stacked embed form featuring, name, email and button only
Here is the code I used for the stacked Embed form (copy & paste but replace your ID & font family).
You will need to use the inspector tool to locate your specific ID code (#mlb2…). Replace font-family name with your font name. In the button field below, I also adjusted the letter-spacing and font-weight to match my other sitewide button styles.
//*mailerlite embed form *//
//* adjust input name and email *//
#mlb2-5436272.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
font-family: arboria !important;
}
//* adjust button font *//
#mlb2-5436272.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
font-family: arboria !important;
letter-spacing: .07em !important;
font-weight: 500 !important;
padding: 1em 1.5em !important;
}
example: horizontal row embed form
Here is the code I used for the Horizontal Row Embed form (copy & paste but replace your ID & font family).
You will need to use the inspector tool to locate your specific ID code (#mlb2…). Replace the font-family name with your font name. In the button field below, I also adjusted the letter-spacing and font-weight to match my other sitewide button styles.
// embed form horizontal row//
//* name and email input fields *//
#mlb2-5400860.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
font-family: arboria !important;
}
//* button input field*//
#mlb2-5400860.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
font-family: arboria !important;
letter-spacing: .07em !important;
font-weight: 500 !important;
}
// end horizontal row //
