Skip to content Skip to sidebar Skip to footer
Home / Font Face / Fonts / Html Email

Getting @font-face To Work In Html Email

Post a Comment
I'm using @font-face to display a typeface I have bought and am self-hosting. It works fine on Apple devices, but in some versions of Outlook and Android my text is not displayed a

Solution 1:

This could be a Flash of Invisible Text (FOIT), but in some cases it's much longer than a Flash.

Both web browsers and email clients need to download a web font before displaying it (perhaps obvious). Depending on the browser/client and web font technique, sometimes a fallback font will initially display, and sometimes nothing will initially display... until the webfont is downloaded.

If there are blank spaces where text should be, email clients can likely detect the html text but can't (yet) render the font. Perhaps the font took a long time to download, or couldn't be downloaded at all. If you're using a preview service like Litmus, the Litmus screenshots could be created before the font is downloaded and displayed. (This happens with images in Litmus previews all the time even though they work perfectly fine.)

Side Note: Not sure if putting a <style> tag in the <body> throws off Outlook, but moving this into the <head> is perfectly safe in Outlook: 

<!--[if mso]>
    <styletype="text/css">h1 {font-family: Georgia,serif !important; font-weight:400!important;}
    </style>
<![endif]-->

Solution 2:

I have found outlook at times does not like important tags. As Ted suggested move the style tag to the head and remove the important tag from the mso conditional statements.

Web font only works on AOL Mail, Native Android mail app (not Gmail app), Apple Mail, iOS Mail, Outlook 2000, Outlook.com app. Source: https://litmus.com/blog/the-ultimate-guide-to-web-fonts

I had created an email today that uses web fonts, what I had done was use web safe font stack on the TD styles and for the web font I used:

*{font-family:(FONT NAME), (fallback font) !important;}

This meant all devices that read the web font will use the web font while others will render the font that is in the styles of the TD.

How that helps.

Solution 3:

I tried out your example and for me the text showed up. Ted may be right on FOIT for this issue.

In Word-based Outlooks, externally imported custom fonts are not applied, instead the rendering engine forces Times New Roman to be displayed.

If you want to prevent this behavior, first you need to define a wrapper element around the text. Then you use the mso conditional statement to apply the "CSS fix" for the wrapper. You can read on the correct use in this tutorial: http://blog.edmdesigner.com/typography-in-modern-html-emails/#fixingfallbackfontinwordbasedoutlooks

Solution 4:

As other answers say, this may be a FOIT.

But the best way of managing the fact that Outlook desktop does not support fonts is to simply include "mso-font-alt" like so:

@font-face {
        font-family: 'ElenaWebBasic';
        src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot');
        src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot?#iefix') format('embedded-opentype'),
             url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff2') format('woff2'),
             url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff') format('woff');
        font-weight:700;
        font-style:normal;
        mso-font-alt:Georgia;
        }

Note the mso-font-alt is a single font, not a font-stack.

You then don't need the Outlook override section.

Post a Comment for "Getting @font-face To Work In Html Email"