CODEWITHSUNDEEP
csshtml-emailfont-face
Tobias Grunwald
Tobias Grunwald

Reputation: 189

@font-face not working in html email

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>

Upvotes: 3

Views: 13990

Answers (1)

Ted Goas
Ted Goas

Reputation: 7587

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.

Upvotes: 4

Related Questions