Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 885
Mustafa Najjar Avatar asked Jul 11 '18 09:07

Mustafa Najjar


1 Answers

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.

like image 142
gwally Avatar answered Sep 17 '22 19:09

gwally