@font-face not working in html email

Question

I am trying to use a custom font in a newsletter/html email. I got the @font-face import working in safari, firefox and chrome, but as soon as I try to use it in an email client (tested with apple mail, thunderbird and gmail) the custom font is not displayed. I read several posts on SO about this but the suggested solution is always to check if the mail-client is supported (which it is) and to use different formats(which I do). It is not working with google fonts either. So are there any other suggestions what could be wrong?

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="x-apple-disable-message-reformatting">

    <!--[if !mso]><!-->
    <style type="text/css">
    @font-face {
          font-family: 'myfont';
          src: url('https://example.com/various/myfont-Regular.eot');
          src: url('https://example.com/various/myfont-Regular.woff2') format('woff2'),
               url('https://example.com/various/myfont-Regular.woff') format('woff'),
               url('https://example.com/various/myfont-Regular.ttf') format('truetype'),
               url('https://example.com/various/myfont-Regular.svg#FreelandforDouglas-Regular') format('svg'),
               url('https://example.com/various/myfont-Regular.eot?#iefix') format('embedded-opentype');
          font-weight: normal;
          font-style: normal;
        }
    </style>
    <!--<![endif]-->
</head>

I think that some mail clients don't even support external fonts. Take a look at this link for a comprehensive guide to css and email clients. http://www.campaignmonitor.com/css/ — manneJan89, Nov 27 '17 at 12:31

Ted Goas · Answer 1 · 2017-11-28T12:59:42.870

As you mention, @font-face is not supported in some email clients. Depending on what fonts you're designing with, you could specify a font-stack the starts with a custom font and falls back to similar system fonts.

This code I use for web fonts goes something like this:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">

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

    <!--[if !mso]><!-->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'>
    <!--<![endif]-->

There are a few ways to reference web fonts in email, I prefer using the <link> method.

Alternatively you can run your font through Font Squirrel's Font Generator and use the @import method:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">

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

    <!--[if !mso]><!-->
    <style>
        @font-face {
            font-family: 'MyWebFont';
            src: url('http://www.website.com/webfont.eot');
            src: url('http://www.website.com/webfont.eot?#iefix') format('embedded-opentype'),
               url('http://www.website.com/webfont.woff2') format('woff2'),
               url('http://www.website.com/webfont.woff') format('woff'),
               url('http://www.website.com/webfont.ttf')  format('truetype'),
               url('http://www.website.com/webfont.svg#svgFontName') format('svg');
        }
    </style>
    <!--<![endif]-->

You might not need all of these font formats (eg. you probably don't need the SVG format), I'd recommend testing.

Thanks for the reply. On the link you gave me, Apple Mail is listed as supported though and it doesn't work. I also saw the link method before but didn't understand how to use it with custom fonts which are not on the web yet. Do you know of any guide how to create them? — Tobias Grunwald, Nov 27 '17 at 13:11
@TobiasGrunwald The custom fonts need to be on the web so you can reference them from the email, so if they're not on the web yet that should be your next step. — Ted Goas, Nov 27 '17 at 13:42
Yes they are on the web. I uploaded them to my webserver, so that is why they are already working in the browser. But when using the link method I have to provide a css file, right? And I don't know how to include the fonts into this css file. — Tobias Grunwald, Nov 28 '17 at 10:13
@TobiasGrunwald I updated my answer with a second way to import web fonts. — Ted Goas, Nov 28 '17 at 13:00
Maybe I'm missing something, but isn't that pretty much the code I already posted in my question? — Tobias Grunwald, Dec 01 '17 at 15:55
There's some extra code in the example I provided, including `` and such. But granted it _is_ similar. Also worth noting that web fonts are supported in Apple Mail, but not in **thunderbird** and **gmail**, so it won't display there no matter what you do. — Ted Goas, Dec 01 '17 at 16:30

@font-face not working in html email

1 Answers1