title: Web fonts fails to apply in newsletter (GMAIL , Yahoo Mail , Outlook, Hotmail etc) working on browser though
body: <p>I have a newsletter where I use web font <em>Proxima Nova Extra Bold</em> and <em>Proxima Nova Alt Regular</em>. 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. </p>
  
  <p>Broswer Layout Screenshot (Font appears perfect ):<a href="https://i.stack.imgur.com/3x04N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3x04N.png" alt="enter image description here"></a></p>
  
  <p>Gmail Layout Screenshot (Font is not taken) : <a href="https://i.stack.imgur.com/ooDSi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ooDSi.png" alt="enter image description here"></a></p>
  
  <p>Here is the way I have applied the font to newsletter file :
          Inside <code>&lt;head&gt;</code> Tag : </p>
  
  <pre><code>&lt;style type="text/css"&gt;
  @import url("http://serverdomainname/emailtemplatefonts.css");
  body{font-family:ProximaNova-AltRegular !important;}
          &lt;/style&gt;
  </code></pre>
  
  <p>Styling via inline css</p>
  
  <pre><code>&lt;span style="padding:25px;text-align:center;display:block;font-size:14px;font-family:ProximaNova-AltRegular"&gt;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. &lt;/span&gt;
  </code></pre>
  
  <p>Here is the css of font file included :</p>
  
  <pre><code>@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');} 
  </code></pre>