How to code an email template with a non-standard font?

Question

I am trying to code an email template with the "Walkaway font" using HTML, however, it does not display properly. The template should be later on sent via MailChimp. As the font is non-standard, what is the best way to do it?

How did you do it, and how did you test it. What made you think it did not work? — U. Windl, Dec 21 '19 at 18:41
As @U.Windl asked... What technique have you used to declare your font? — , Dec 23 '19 at 12:03
It should also be noted, web fonts aren't supported everywhere, including Gmail, so do not expect this to work the same as on websites, even if using the correct font declaration technique for email. — , Dec 23 '19 at 12:03
Without a code sample, it's rather hard to tell what you're doing wrong. — gwally, Dec 23 '19 at 16:45
Does this answer your question? [Getting @font-face to work in html email](https://stackoverflow.com/questions/43231145/getting-font-face-to-work-in-html-email) — Syfer, Jan 01 '20 at 01:20

score 0 · Answer 1 · answered Jan 01 '20 at 22:28

For best results on the web, be sure to use woff or woff2 format.

Note that only Apple Mail and some others support custom web fonts. You'll need a fallback font for those that don't support custom web fonts.

Upload your font somewhere, on a server that allows cross-origin requests (see Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy for specific details on how to setup the server for that).

<head>
<style type="text/css">
@media screen {  
    @font-face {
        font-family: 'Walkaway';
        src: url('https://www.xyz.co.uk/webfonts/Walkaway.eot');
        src: url('https://www.xyz.co.uk/webfonts/Walkaway.eot?#iefix') format('embedded-opentype'),
             url('https://www.xyz.co.uk/webfonts/Walkaway.woff2') format('woff2'),
             url('https://www.xyz.co.uk/webfonts/Walkaway.woff') format('woff');
        font-weight:400;
        font-style:normal;
        mso-font-alt:Arial;
        }
    }
</style>
</head>
<body>
...
<p style="font-family:Walkaway,Arial,sans-serif;">Hi there</p>
...
</body>

Mso-font-alt takes a single value, and is the fallback for Outlook specifically. Others will use the fallback specified in your font-family in your <p> or other tags.

Copy-paste the entire @font-face if you want another font, such as the bold or italic variants. Then just change the src, the font-weight and font-style accordingly. You will use the same font-family name for each of these variants (ie. 'Walkaway') if they are the same font.

How to code an email template with a non-standard font?

1 Answers1