How to use google fonts in HTML email

If you’re designing/developing an HTML email you may be thinking that you are restricted to default system fonts. Yes for an easy ride default system fonts will render everywhere. But what if you want to push html email to the limits and use a google font to enhance your design.

In this post i will show you how you can use google fonts in your HTML email templates.

We will start by going to http://google.com/fonts and selecting your desired font then follow the example below to get your template setup to use google fonts.

In this example we will use the Open Sans font.
https://www.google.com/fonts#QuickUsePlace:quickUse

We start by adding the following between our head tags.

We can also add our font by importing into our style tag like so :

We also need to add the following code to our head tag. This ensures that a fallback font is loaded on email clients that do not support google fonts. (Without this in place the email clients that do not support google fonts will load the times font). In this case our fallback font is arial, you can use any default system font of your choice.

We now need to add

to each td that has text contained within it. We will also need to add a class to these td’s called googleFont. This will active the code example above and ensure the font specified above is loaded instead of the times font.

Notes:
In my test’s some ESP’s do not like you loading external stylesheets into your HTML. So you would have to use default system fonts or remove the external stylesheets & it should load the font anyway or fallback to your default system font.

Litmus also cover a lot of ground when it comes to adding custom fonts in HTML email – https://litmus.com/blog/typography-tips-for-email-designers


Glenn Smith





© 2017, All Rights Reserved - Glenn Smith