It may surprise you to know that you can in fact use Google Fonts and Typefaces within your HTML email templates, and the support for this within Email clients, especially Apple devices, is better than you might think. This is not a standard function within platforms such as Mailchimp and Campaign Monitor when using their built in HTML email templates, but it can be easily integrated into a template when being hand-coded.
Call to Google Font / Typeface API from within the HTML Email template header…
To use a Google font in any online application, you need to call the font into the document within the header of the code. This is the same in HTML email templates. Nearly all email clients and mobile devices allow the HTML document to render using it’s Header section, and external sources are of course allowed, as this is how images are used within the HTML email templates too.
Therefore, we can insert an external Google Font API call into the header, generated from the Google Font online tool, in the same way as if we were coding a standard web page. First navigate over to Google Fonts and choose yourself a typeface. Following the online instructions you should end up with the options to copy and paste some embed code, using the “Standard” method, not the “Import” method. These same instructions will tell you where in your HTML document you need to paste this embed code, so simply follow these instructions with your HTML email. You are now free to use the CSS typeface name as referenced in the embed code, throughout your document.
Here is an example of the embed code used within an Origami Mail HTML email template:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<link href=’https://fonts.googleapis.com/css?family=Open+Sans:400,300,700′ rel=’stylesheet’ type=’text/css’>
And in this example the typeface would be called by the following CSS:
<h3 style=”color:#fff; font-weight:normal; font-family: ‘Open Sans’, Arial; font-weight: 300; font-size: 21px;” class=”outlook-fix”>Do you need bespoke,<br> mobile responsive <strong>HTML<br> Emails?</strong></h3>
But, what is the support for Google Fonts in HTML email templates?
Good question! Well, currently all Apple devices support them beautifully and for this reason alone they may be worth including in your templates. Older versions of Androids mobile client support them, Mozilla’s Thunderbird and even older versions of Outlook such as Outlook 2000.
This is about as far as it goes with the rest of the clients simply needing a fallback typeface declared, which in the case of the example given earlier would be Arial, indicated in the standard way within CSS.
Modern Versions of Outlook are defaulting to Roman?
Oh yes, Outlook has raised it’s head again as the troublesome client that it always is. This problem can be easily fixed a couple of ways but the most effective is to include an Outlook only style, which you can then apply as a class to elements which have the Google Font applied.
Here is an example of this, added to the Style section of the Header.
font-family: Arial, sans-serif;
This should ensure Outlook falls back to the desired Typeface! If you want to see this example working in an email then you can see our demo email by requesting it here.