Use a specific font in the text that is sent in an email

Hello,

I am trying to change the Font of the text that is sent by email. I have imported the font to the resources and added the configurations in the CSS. On the preview in the Service Studio the font it's correct but when I receive the email, it's not correct.

The font name is Tosca Zero. Maybe the problem is that the mail client doesn't support this font...?

Hi André,

I believe @import and @font-face support in mail clients is not universal - in what clients have you tried opening your email?

Afonso Carvalho wrote:

Hi André,

I believe @import and @font-face support in mail clients is not universal - in what clients have you tried opening your email?

Hi Afonso,

I have tried with Gmail.


Which client are you using? Outlook '03, '07, '10 and '13 do not support @import and webfonts. Only below clients do support

  • Apple Mail
  • iOS Mail
  • Android 4.2 Stock Mail Client
  • Lotus Notes 8
  • Outlook 2000
  • Outlook 2011
  • AOL Webmail (in browsers that support @media)
Solution

I'm not too certain about Gmail, but searching online it looks like it won't display non-web safe fonts:

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

https://stackoverflow.com/questions/28747848/gmail-not-showing-correct-font

The first article provides a list of email clients that will support web fonts:

This is one of the reasons that tables are used in styling and shaping email content even though it is bad practice for a web page - HTML and CSS support is very poor and very distinct by email client. I would advise you to use a web-safe font to maintain consistency in most email clients.

Solution

You are right Afonso. I have just tried with iOS and Google Android mail and it works. I think I will have to use a more "standart" font.

Thanks for the help.

No problem André. Email clients are still a little archaic on the web side of things, and I had to rack my head thinking about a couple of projects from a few years back.