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

18,533

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]-->

Alternatively you can use the @import method.

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

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.

18,533

Preetham Hegde

Web & Mobility Specialist at Darwish Holding Qatar.

Updated on June 12, 2022

Comments

Preetham Hegde about 2 years

I am working an HTML mailers (HTML Email) and the design I received contains custom fonts. How can I use custom fonts in my HTML email?

Thanks in advance.
Eoin over 3 years

This still shows Times New Roman in some Outlooks for me.