How to Use Google Web Fonts in an HTML Email

Is there a way to use Google Web Fonts in an HTML email?

If the font is absolutely necessary, you will have to go with the text as image solution. As of December, only iOS Mail, Mail.app, Lotus Notes 8, default Mail on Android, Outlook 2000, and Thunderbird support the use of an external custom font.

See:
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

Edit 2/10/2014: Since this is one of my most popular answers, here is the updated link on best practice of web fonts in emails:

http://www.campaignmonitor.com/resources/will-it-work/webfonts/

Use a Google Font in mails with email-templates for NodeJS

Google Fonts Do Not Work With Gmail Or Outlook

Webfonts do not work in all email clients. They do not work with Gmail, Yahoo, Android clients and spotty support for Outlook 2007-2016. I know this sounds ridiculous, since Google has Google Fonts, but the current reality is that Gmail does not support Google Fonts.

You need to settle on a fallback font which is not Tillana or Open Sans, which is also a Google Font. In your case, the backup font for Gmail will be Arial.

Fonts supported by Gmail

https://jsfiddle.net/wallyglenn/g35nchmL/

These links will give you a better understanding of web fonts and how to use them in email.

https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/
https://www.campaignmonitor.com/css/text-fonts/font-face/
https://www.cssfontstack.com
https://litmus.com/blog/the-ultimate-guide-to-web-fonts

Outlook Custom Fonts

Microsoft Outlook is frustrating. Outlook 2007-2016 will work sometimes with Google Fonts. It has a problem with web-safe fonts as well. If the font has a space in the name, it will revert to it's default font, Times-New Roman, which is frustrating because that font has a space in the name!

To make sure Outlook does not default to Times, add this just below your <style></style> block:

<!--[if (gte mso 9)|(IE)]><style type="text/css">
body, table, td, a, p {font-family: Arial, sans-serif !important; font-size: 12px; font-weight: 300;}
</style><![endif]-->

Add more html elements as needed to the list of body, table, td, etc. You can customize as you would with any other style sheet. Outlook should use your style sheet, but if it doesn't this usually forces it to work.

Good luck.

How to import custom fonts in HTML mailers (HTML Email)

First and foremost, web fonts are currently supported in these email clients:

AOL Mail
Native Android mail app (not Gmail app)
Apple Mail
iOS Mail
Outlook 2000
Outlook.com

(Eg. so there's no way to display a custom web font in Gmail web, Yahoo, or newer versions of Windows Outlook)

Step 1: If the font is already hosted on a service like Google Fonts, it can be referenced from there in the HTML's <head> section like so:

<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
    <style>
        * {
            font-family: sans-serif !important;
        }
    </style>
<![endif]-->

<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->

Sample Image

Alternatively you can use the @import method.

<style>
    @media screen {
        @import url('https://fonts.googleapis.com/css?family=Roboto');
    }
</style>

Sample Image

Outlook doesn't support web fonts and would choke on this reference, so wrapping it in a @media tag will make Outlook ignore this all together.

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. The resulting files can be uploaded to a server and referenced like so:

@media screen {
    @font-face {
        font-family: {font-name};
        src: url({http://www.website.com/font-url}) format('woff'),
             url({http://www.website.com/font-url}) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
}

Note: For a deep dive on how to reference web fonts in email, check out this article by Litmus.

Step 2: From there, referencing the web font in the font stack will display it in email clients that support web fonts.

font-family: 'Roboto', 'fallback font 1', 'fallback font 2', sans-serif;

Email clients that do no support web fonts (such as Gmail web, Yahoo, or newer versions of Windows Outlook) will skip over the custom font and attempt to display the fallback fonts listed in the font stack.

Google Fonts Not Displaying in my Email

Gmail doesn't support @font-face(which is inside of a google-font link) yet.

Take a look at the support here at Campaign Monitor for web fonts

Sample Image

From litmus

Web Fonts in Gmail

Finally, despite have a wildly popular web fonts service, Gmail does
not support the use of the @font-face property. Designers that use web
fonts in emails should carefully consider their font-stack, as their
backup fonts will be rendered in Gmail.

NOTE: However, you can make gmail render webfonts if you use a service like campaign monitor, since they use some special feature to treat this.

How to Use Google Web Fonts in an HTML Email

Is there a way to use Google Web Fonts in an HTML email?

Use a Google Font in mails with email-templates for NodeJS

How to import custom fonts in HTML mailers (HTML Email)

Google Fonts Not Displaying in my Email

Related Topics

Leave a reply