CODEWITHSUNDEEP
htmlcssemailwebfontsnewsletter
Vivek Tankaria
Vivek Tankaria

Reputation: 1311

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');}

Upvotes: 4

Views: 7035

Answers (3)

Daniel Rikowski
Daniel Rikowski

Reputation: 72514

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).

Upvotes: 4

Ted Goas
Ted Goas

Reputation: 7577

Most email clients don't support web fonts, and no popular webmail services do. Even though you're referencing Proxima Nova, the font you're actually seeing in Gmail/Yahoo is the default system sans-serif (since you have no fallback fonts in your font stack)

Web font support in email clients isn't great, so fallback system fonts are important. You can reference web fonts using the <link href=''> tag instead of @import to increase your coverage a little.

Upvotes: 0

Joey M-H
Joey M-H

Reputation: 773

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.

Upvotes: 1

Related Questions