How to Upload Custom Fonts to Mailchimp?

Many organizations spend thousands of dollars every year on marketing and designing email campaigns. While they use free fonts to design the content, they don’t understand the importance of using unique fonts in their marketing campaigns. If you’re thinking of creating email campaigns and want to use unique fonts in your emails, then this post is for you.

Learn how to upload custom fonts to Mailchimp so you can create beautiful, branded emails that stand out in your subscribers’ inboxes. This quick, easy guide will show you how to add fonts to Mailchimp in just a few steps.

Add Custom Fonts to Mailchimp

1. Create a New Template

The first step is to create a MailChimp template. The picture below shows the basic started template.

This is what your design should look like after selecting this template:

2. Select a Font

A lot of email clients do support custom fonts, but Mailchimp only allows a few web-safe fonts. Creating custom fonts requires insertion from CSS. In other words, JavaScript isn’t allowed. Neither TypeKit nor Typography.com are supported. In any case, you can use Google fonts.

Picking the right font from Google’s bazillion fonts can ruin your day. Try to find one you like and then just do a web search for “{fontname} pairing”.

For this template, If you want “open sans” for the body and with that web search you can find “Playfair Display” is one that compliments nicely. So you can use those two.

In Google fonts, add both to a collection and then click the “use” button. From here you should see a style sheet to copy and paste.

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Open+Sans:400,300,700" rel="stylesheet" type="text/css" />

Keep your code simple and use inline CSS when working with HTML email to achieve the best results. By converting styles from your pasted code to inline, Mailchimp’s Automatic CSS Inliner tool helps you avoid having to manually code the styles.

To turn on CSS inliner, you have to follow these steps,

Click Design Email in the campaign builder’s Content section.
Select Paste in code under the Code Your Own option on the template step.

Paste your HTML code in the design phase.
On the Settings tab, click.
Automatic CSS Inliner has a checkbox next to it.

3. Insert the Font into the Template

Let’s add it to our theme now that we have the code and know the font to use. Since editing HTML isn’t possible in MailChimp, we’ll make a false version by adding code to their editor. In the top left corner, click the first text that appears:

Next from the text editor select the code button. Here is a screenshot showing the button.

Copy and paste the code mentioned below;

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Open+Sans:400,300,700" rel="stylesheet" type="text/css" />
<style type="text/css">h1,h2,h3,h4,h5 { 
  font-family: 'Playfair Display', serif !important; 
  font-weight: 300 !important; 
} 
h1 { 
  line-height:44px !important; 
  color: #111 !important;
} 
p, .footerContainer { 
  font-family: 'Open Sans', sans-serif !important; 
  font-weight: 300 !important; 
  color: #111 !important;
}
</style>

The above code is all standard CSS with the exception of having to use !important on everything to override Mailchimp’s default styling.

You ought to be able to see and use a lovely template with a unique font using that set.

Conclusion

I hope you enjoyed our article about uploading fonts to Mailchimp. With this knowledge, we know that you can upload custom branded fonts to your Mailchimp campaigns and newsletters to give them a professional look. You can also wrap text in your email template to make it more unique.

So what are you waiting for? Upload your custom fonts to your next Mailchimp campaign.

Thanks for Reading!!