Web fonts not rendering in supportive email clients

Question

It's my understanding that the following email clients DO support web fonts:

AOL Mail Native Android mail app (not Gmail app) Apple Mail iOS Mail Outlook 2000 Outlook.com App

However, it's not rendering correctly in anything other than Apple Mail and AOL Mail. I'm using the @import method to pull Bebas Neue from Adobe Typekit: @import section

and then calling it with inline CSS styling:

CSS call

Am I missing something key here? Why is it not rendering correctly in the other supportive clients?

Answer 1

You need to declare that font in the style or as a google web font link in the head. Example below:

@media screen {
  @font-face {
    font-family: 'DINPro-Light';
    src: url('http://yourfont.com/fonts/din/DINPro-Light.eot');
    src: url('http://yourfont.comfonts/din/DINPro-Light.eot?#iefix') format('embedded-opentype'),
    url('http://yourfont.comfonts/din/DINPro-Light.woff2') format('woff2'),
    url('http://yourfont.comfonts/din/DINPro-Light.woff') format('woff'),
    url('http://yourfont.comfonts/din/DINPro-Light.ttf') format('truetype'),
    url('http://yourfont.comfonts/din/DINPro-Light.svg#DINPro-Light') format('svg');
    font-weight: normal;
    font-style: normal;
  }