![]() If the font is already not available online but you have the font file, it can be converted to a web font using a tool like font squirrel. Outlook doesn't support web fonts and would choke on this reference, so wrapping it in a tag will make Outlook ignore this all together. ![]() Step 1: If the font is already hosted on a service like Google Fonts, it can be referenced from there in the HTML's section like so: Īlternatively you can use the method. Note: If you have Outlook 2007, choose the Tools menu, then choose Options > Mail Format. so there's no way to display a custom web font in Gmail web, Yahoo, or newer versions of Windows Outlook) Native Android mail app (not Gmail app).Also, this method is not semantic because it’s including CSS outside the head, and I am confident that some will strip it out.First and foremost, web fonts are currently supported in these email clients: 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.Īs with anything related to email if you try this be sure and test it in as many email clients as you can. My goal with this tutorial is to show a simple solution to a problem I encountered when creating my MailChimp template. With that set, you should be able to preview and have a nice template with a custom font. The above code is all standard CSS with the exception of having to use !important on everything to over-ride MailChimps default styling. Here is a screen shot showing the button.įinally, copy and paste the below code and add it to the editor: įont-family: 'Playfair Display', serif !important įont-family: 'Open Sans', sans-serif !important Next from the text editor select the code button. Click the first text you see in the upper left: MailChimp doesn’t allow you to edit HTML, so we are going to fake it by inserting code into their editor. Now that we know what font to use and we have the code lets add it to our theme. From here you should see a style sheet to copy and paste. In Google fonts, I added both to a collection and then click the “use” button. ![]() What I have found helpful is to find one you like and then just do a web search for “ pairing”.įor 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. I’d wager I’ve lost enough hours to drive from North Carolina to California just trying to find perfect font pairings. ![]() Google has about a bazillion fonts to choose from and picking a pairing can ruin your day. In order for custom fonts to work, they must be inserted from the CSS. Be sure to specify fallback fonts in your email and test your email before sending it, so that it performs well in all clients. Selecting a fontĪs I mentioned in the beginning, Mailchimp only allows a few web safe fonts but a lot of email clients do support custom fonts. Some email clients do not support HTML email or web fonts in email, which will affect what your recipients see. Let’s work on improving this by adding custom fonts and a few style improvements. It’s not a bad design, but it feels very generic. Here is a screen shot showing my choice:Īfter you select this template you should have a design that looks something like this: I’m going to choose Basic -> One Column as a starter. To get started create a new template in your MailChimp account. 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. In my opinion, a custom font gives the design a little extra pop and professionalism. 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. By default, it only includes a list of nine web safe fonts. MailChimp includes a neat drag and drop email designer, but it lacks the ability to customize your templates outside of just the basics.
0 Comments
Leave a Reply. |