Search code examples
htmlcssfontsgmailhtml-email

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?


Solution

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