MailChimp includes a neat drag and drop email designer, but it lacks the ability to customize your templates outside of just the basics. One such problem is the font choice. By default, it only includes a list of nine web safe fonts.
These fonts are your safest bet if you want to support as many email clients as possible, but I like to make my emails unique. In my opinion, a custom font gives the design a little extra pop and professionalism. In this tutorial, I want to outline a simple way of adding these to MailChimp’s included templates and still keep the nice drag/drop workflow.
Creating a new template
To get started create a new template in your MailChimp account. I’m going to choose Basic -> One Column as a starter. Here is a screen shot showing my choice:
After you select this template you should have a design that looks something like this:
It’s not a bad design, but it feels very generic. Let’s work on improving this by adding custom fonts and a few style improvements.
Selecting a font
As I mentioned in the beginning, Mailchimp only allows a few web safe fonts but a lot of email clients do support custom fonts. In order for custom fonts to work, they must be inserted from the CSS. Meaning, you can’t use any JavaScript. No TypeKit, Typography.com, or the likes. However, you can use Google fonts.
Google has about a bazillion fonts to choose from and picking a pairing can ruin your day. I’d wager I’ve lost enough hours to drive from North Carolina to California just trying to find perfect font pairings. What I have found helpful is to find one you like and then just do a web search for “{fontname} pairing”.
For this template, I knew that I wanted “open sans” for the body and with that web search I found “Playfair Display” is one that compliments nicely. So we’ll use those two.
In Google fonts, I added 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" />
Implementing the font into the template
Now that we know what font to use and we have the code lets add it to our theme. MailChimp doesn’t allow you to edit HTML, so we are going to fake it by inserting code into their editor. Click the first text you see in the upper left:
Next from the text editor select the code button. Here is a screen shot showing the button.
Finally, copy and paste the below code and add it to the editor:
<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 over-ride MailChimps default styling.
With that set, you should be able to preview and have a nice template with a custom font. Here is the finished design:
Wrap Up
My goal with this tutorial is to show a simple solution to a problem I encountered when creating my MailChimp template. The reason I choose this route over a custom template is because I wanted to keep the simplicity of their editor and to prevent having to deal with fighting HTML tables every week.
As with anything related to email if you try this be sure and test it in as many email clients as you can. Also, this method is not semantic because it’s including CSS outside the head, and I am confident that some will strip it out.
Eric L. Barnes 
Thanks a lot! This really helped me!
LikeLike
Excellent! Thanks for the comment.
LikeLike
Me too!
LikeLike
Hello Eric,
I’m having trouble with this, I’m not great with coding, but can get by when I need to.
This code manages to change the title font for me, but I am finding it difficult to change the body font. I still get stuck with the default Arial font from Mailchimp.
LikeLiked by 1 person
It’s sounds like it’s wysiwyg is adding Arial to the style tag. You probably want to switch to the code view and if you see
font-family:anywhere just manually remove it.LikeLike
It should be noted that this wouldn’t work across all email clients. Some email clients will strip the import code out.
LikeLike
These are the specific email clients that would only support the use of custom fonts:
-Outlook2000
-iOS Mail
-Apple Mail
-Android (default client, not Gmail)
-Thunderbird
LikeLiked by 1 person
I’m not certain that list is accurate. I know gmail in the browser supports them. But as I mentioned in the post always check your email first in the popular apps your subscribers use. Most services give you this breakdown.
LikeLike
There’s an article by MailChimp on this: http://templates.mailchimp.com/design/typography/
LikeLike
Eric how do you deal with hyperlinking, given that for each hyperlink you will have to re-enter all of the above code? Seems a bit too tedious
LikeLike
I didn’t include it here, but I just added the
a{to the included css.LikeLike
Hi Eric
Thanks for the tutorial!
I’m not and expert coder and tried it step by step but seems it’s going nowhere
Here is the code
Please advise what did i do wrong
LikeLike
Same here !
Did I code something wrong ?
Please, I really need youuuuuu !… 😦
Thank you in advance !
LikeLike
Did you include the css include for the fonts?
LikeLike
Here is my code again – and it is not working
Please advise 🙂
h1,h2,h3,h4,h5 {
font-family: ‘Montserrat’, sans-serif !important;
font-weight: 300 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Raleway’, sans-serif; !important;
font-weight: 300 !important;
color: #111 !important;
}
LikeLike
Hi Eric !
Thank you for your quick answer !
Yes, I did : the font changes but it is not the Raleway font appearing… 😦
LikeLike
Hi Eric !
Thank you for your quick answer !
Yes, I did : the font changes but it is not the Raleway font appearing… 😦
LikeLike
Doesn’t seem to work for me.
LikeLike
FYI, I got this working, but I had to link via https. So, like this:
Note the “https” (and not “http”) in the href.
LikeLike
Hi, I follow your code.
on mailchimp works, but when I send a Test email the font doesn’t work anymore.
I use gmail
LikeLiked by 1 person
I had the same issue. Did you manage to find a resolution ?
LikeLike
Outlook will replace this with Times New Roman
LikeLike
Thanks for this useful tutorial, Eric. I really wish Typekit or a similar service was fully supported on all email clients, but Google Fonts is better than being limited to just the web-safe fonts.
Someday, email will catch up to the rest of web design!
LikeLike
Hey Eric,
So, I think I’m following along correctly. I placed the following in the text area at the top of the page:
h1,h2,h3,h4,h5 {
font-family: ‘Allure’, serif !important;
font-weight: 300 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Open Sans Condensed’, sans-serif; !important;
font-weight: 300 !important;
color: #111 !important;
}
Now, when I go to the design area, I don’t have any of the new fonts listed in the font drop down. I guess I don’t understand where to go from here…
Thanks,
L
LikeLike
Hi everybody,
To those who still struggle… The code that’s offered bij Eric has a tiny bug:
p, .footerContainer {
font-family: ‘Open Sans Condensed’, sans-serif; !important;
The semicolon following sans-serif shouldn’t be there.
Hope that helps you.
LikeLike
Thanks for the heads up. I’ve updated the post now.
LikeLike
Not quite getting it to clear.
Anyone see anything?
h1,h2,h3,h4,h5 {
font-family: ‘Oswald’, sans-serif !important;
font-weight: 300 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Ubuntu’, sans-serif !important;
font-weight: 300 !important;
color: #111 !important;
}
LikeLike
Having trouble getting the code to accept.
Anyone see anything?
h1,h2,h3,h4,h5 {
font-family: ‘Oswald’, sans-serif !important;
font-weight: 300 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Ubuntu’, sans-serif !important;
font-weight: 300 !important;
color: #111 !important;
}
LikeLike
Thanks for this!
LikeLike
Hey I can only get this to work in MailChimp’s preview, not when I actually send the email, I’m using Gmail but have also testing outlook….what gives?
LikeLiked by 2 people
Many email providers strip out the @import function.
There’s only a couple email clients that support it.
LikeLike
Thanks so much Eric. You saved my a…. right before the presentation.
LikeLike
Thank you Eric! Worked fine for me!
LikeLike
Thank you Eric! This worked great. The only thing I can’t figure out is how to use this technique to change the font inside Mailchimp’s buttons?
LikeLike
Agreed — this worked great! Also trying to figure out how to change the font inside Mailchimp’s buttons.
LikeLike
Create the button yourself in text field with html tag or for a link.
LikeLike
Hi Eirc,
Cool Post, Facing a problem though
I am able to get the preview with the Google fonts both in the preview & editor, hoever when I send the test email using mailchimp I see the websafe fonts.
LikeLike
Just a little comment for people who struggle, as I used to : don’t forget to make sure that in your text blocks you add the proper tags (, etc.) ! 😉
LikeLike
I believe you can use markdown style with the three backticks:
```
my code here
```
When I went to edit your comment to fix it no code was there so apparently WordPress totally stripped it out. Sorry.
LikeLike
thank you so much, worked like a charm
LikeLike
Aww, yes. For anyone having trouble, here is a full proof way to go about it.
h1,hp,h3,h4,hdoor {
font-family: ‘Oswald’, sans-serif !important;
font-weight: underweight !important;
}
h1 {
line-height:44px !improrrtant;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘FairsNayferWebs’, sans-Ku !important;
font-weight: 290 !important;
color: #112 !important;
}
LikeLike
Surprisingly this worked for me, first go. Thanks. Miracles do happen.
LikeLike
Thanks. I was about to export the template into HTML, but then I would of lost the nice drag and drop capability. I did a quick test and it seems to work great. Instead of adding it to that to section I add a new drag in code block to the top and add the snippets there.
As I said, this seems to work. However, because this article is a little old, are there any known drawbacks discovered over just exporting as HTML and putting further up in the header?
LikeLike
Hi Erik
Is this tutorial still applicable? I am having problems with the MailChimp formatting while trying to use a Google font. I am not trying to find a pairing font. When I add the code strip the theme adjusts but once I add the raw text from my Google drive the font reverts back to the original format.
Noting that it was four years ago I wonder if there has been some evolution in the product suites that renders your article outdated… or it might be just me!
Thanks Charles
LikeLike
Great Article!
LikeLike
FOR EVERYONE WHOSE CSS ISN’T WORKING:
Make sure you have the to the custom font.
AND DON’T FORGET THE tags around the actual CSS itself! Do not paste only what’s in between the tags; make sure you include INSERT YOUR CSS HERE.
LikeLike
When I use the code, the body of the email changes fonts but nothing else. I want to use Montserrat throughout but changing the weights but the only place that the font changes is the body. What do I need to do in order to have all sections the same font?
LikeLike
Hi Eric! This solution was such a lifesaver for me! Thank you.
My next question is how can I change the font of buttons in MailChimp?
Thank you!
LikeLike
Thank you so much for this post Eric,
It worked for me with the headers but I’m still not able to change the paragraph. The weight of the paragraph is changing but the font itself not.
Can anyone help me out?
This is my code:
h1,h2,h3,h4,h5 {
font-family: ‘Poppins’, sans-serif; !important;
font-weight: 700 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Poppins’, sans-serif; !important;
font-weight: 400 !important;
color: #111 !important;
}
LikeLike
There’s a small bug in your CSS because you have a semi colon before !important. If you don’t assign the forced override for the style then the Mailchimp style takes preference
Correct:
“`font-family: ‘Poppins’, sans-serif !important;
Incorrect
font-family: ‘Poppins’, sans-serif; !important;
LikeLike
Thanks for this tutorial. I had been struggling for ages to get Mailchimp to use our font because the way I had implemented it before we needed to have the style in every block. After re-reading your blog post a couple times I finally cracked it and realised that putting an invisible text block in the header with the styles would have them cascading throughout the whole email.
LikeLike
Wow your comment helped me so much!!! Thanks a lot.
However I’m still struggling with the body text, it’s not changing, but the heading is. Maybe you can spot a bug in my code?
h1,h2,h3,h4,h5 {
font-family: ‘Cormorant Infant’, serif !important;
font-weight: 400 !important;
}
h1 {
line-height:34px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Montserrat’, sans-serif !important;
font-weight: 300 !important;
color: #111 !important;
}
LikeLike
I’ve been struggling with getting Mailchimp to use my custom font in the entire email without having to implement the custom style in every block, which is tedious (and impossible for some users). I had to re-read your blog post a few times and finally the penny dropped – if you add the styles into the header it is applied everywhere. I thought I’d mention this in a comment because some people may be working from existing templates.
LikeLike
Hi Eric,
I have also added the (whole) code to the header, preheader, body, footer, but no matter how I insert it, the only text that is shown correct, is the body text.
Are you able to see what goes wrong?
Thx for your time.
h1,h2,h3,h4,h5 {
font-family: ‘Outfit’, sans-serif; !important;
font-weight: 400 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Outfit’, monospace !important;
font-weight: 400 !important;
color: #111 !important;
}
LikeLike
Sorry. This is the correct code:
h1,h2,h3,h4,h5 {
font-family: ‘Outfit’, sans-serif; !important;
font-weight: 300 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
p, .footerContainer {
font-family: ‘Outfit’, monospace !important;
font-weight: 300 !important;
color: #111 !important;
}
LikeLike