Gmail is not rendering Font correctly on Emails

问题

I've built an html Email and used Google fonts.

I've included the fonts in the head tag using:

    ╔!--[if !mso]╗╔!--╗
     <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800,800i" rel="stylesheet"/>
    ╔!--╔![endif]--╗

and to use the fonts, i.e I did so:

    <tr>
      <td valign="top">
         <p style="line-height:1;margin:0;color:#ffffff;font-family:'Merriweather Sans', sans-serif;font-size:12px;font-weight:normal;">Für Fragen sind wir jederzeit für Dich da:</p>
      </td>
    </tr>

The problem is: the fonts are rendered perfectly on apple mail, on Gmail only Oswald.

I've tried to figure out, why 'Merriweather Sans' is not rendered correctly, but no chance.

Could you help me please?

回答1:

The problem is: the fonts are rendered perfectly on apple mail, on Gmail only Oswald.

For the first part of this question, apple mail supports web fonts. This is the reason you see it render properly across all apple mail clients.

For the second part (Gmail) would have Oswald in its family font, that is the only reason that I can think off that will render Oswald in your emails.

I've tried to figure out, why 'Merriweather Sans' is not rendered correctly, but no chance.

Gmail still has an issue with web fonts linked to emails and that is the reason 'Merriweather Sans' is not rendered.

回答2:

Gmail does not work with Google Fonts or any webfont.

Gmail supports a number of web safe fonts. I can't locate the list and don't see Oswald listed. Perhaps it's supported, but not listed. Or perhaps it maps to a similar font.

Updated

These are the fonts supported by Gmail:

• https://jsfiddle.net/wallyglenn/g35nchmL/

Stackoverflow wants me to post code before I could post the link
of fonts that work in Gmail I maintain on JSFiddle.
I felt a list of fonts might be useful in choosing a fallback font.

I am not being lazy, look at the link and you'll understand.

For more information on fonts in email, check out the article below.

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

Good luck.

回答3:

Web fonts don't have universal support, here are the email clients where they are supported:

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

回答4:

According to this post on Litmus;

Pro Tip: In April 2018,Gmail released an updated interface for their webmail client. This new interface uses two popular web fonts: Google Sans and Roboto. What does this mean? Despite Gmail not supporting web fonts, if you use either of these web fonts in your emails, they will actually render in Gmail. Simply add the fonts to your font-family CSS attribute if you want to use them in your email.

Which is why there is a comment on one of the answers about Roboto working on Gmail.

来源：https://stackoverflow.com/questions/51281964/gmail-is-not-rendering-font-correctly-on-emails

标签

html

css

fonts

gmail

html-email