Menu
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 ):
Gmail Layout Screenshot (Font is not taken) : 
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');}
747
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).
193
Gmail and other email clients will strip out the <style> tag in the HTML. I'm not aware of any way around this. If you want/need to use a custom font for a header or otherwise, the most reliable way is to insert an image of the font, unfortunately.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
