Search code examples
htmlcssemailwebfontsnewsletter

Web fonts fails to apply in newsletter (GMAIL , Yahoo Mail , Outlook, Hotmail etc) working on browser though

I have a newsletter where I use web font Proxima Nova Extra Bold and Proxima Nova Alt Regular. When I open the newsletter layout on browser the font appears fine for all text. But when the same newsletter is opened in Gmail or Yahoo or other mail client the font is not applied to text.

Broswer Layout Screenshot (Font appears perfect ):enter image description here

Gmail Layout Screenshot (Font is not taken) : enter image description here

Here is the way I have applied the font to newsletter file : Inside <head> Tag : 

<style type="text/css">
@import url("http://serverdomainname/emailtemplatefonts.css");
body{font-family:ProximaNova-AltRegular !important;}
        </style>

Styling via inline css

<span style="padding:25px;text-align:center;display:block;font-size:14px;font-family:ProximaNova-AltRegular">Discover attractions, restaurants, nightlife, and accomodations around the world. Use specialized filters in your search to find free museums, family friendly restaurants, weird and wonderful hotels, and much more. </span>

Here is the css of font file included :

@font-face {font-family: 'ProximaNova-AltRegular';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_alt/ProximaNovaAltRegular.woff2') format('woff2');}



@font-face {font-family: 'ProximaNova-Extrabold';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_bold/ProximaNovaExtrabold.woff2') format('woff2');}
Solution

  • Many email clients do not support web fonts. And even if they do you have to jump through quite a few hoops, like moving the style tag between head and body for example.

    Here is a summary on web font support for various email clients:

    https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/

    Prepare for quite a few hacks and consider falling back to standard fonts (but prefer not to use images because of the limitations this places on the accessibility of your email).