CODEWITHSUNDEEP
phpcsshtml-email
Soumyajit
Soumyajit

Reputation: 349

HTML email doesn't showing properly in Gmail

I am sending a HTML email and getting different results in gmail.

This is what I'm getting on gmail, This is what I'm getting on gmail

and this is what I'm getting on Mintmail this is what I'm getting on mintmail

I want the mintmail one in the gmail too. Notice the difference between character spacing and the font(heading font: Oswald and the sub-heading font: Vollkorn).

Here is my PHP code to send the mail,

$to = $email_to;
$subject = 'Welcome to Codebreak!';
$from = $email_from;

// Headers for the HTML email
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: '.$from."\r\n".
    'Reply-To: '.$from."\r\n" .
    'X-Mailer: PHP/' . phpversion();

// Email body
$message = '';
$message .= '<html><head>';
$message .= '<meta charset=utf-8>';
$message .= '<link href=//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet integrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN crossorigin=anonymous>';
$message .= '<link href=https://fonts.googleapis.com/css?family=Alfa+Slab+One|Open+Sans|Chivo:900|Playfair+Display:700|Roboto:400,300,500,700|Oswald:400,500,600,700|Vollkorn:400,700 rel=stylesheet>';

$message .= '</head><body>';
$message .= '<div class=main_container style=width:80%;margin:0 auto;>';
$message .= '<div class=top_red style=padding:15px;background-color:#E74C3C;color:#fff;><div class=mail_icon style=margin-left:auto;margin-right:auto;width:150px;><img src=images/email.png height=150px width=150px></div><div class=texts style=text-align:center;><h2 style=font-family:Oswald,sans-serif;font-size:45px;color:#fff;margin-bottom:10px;margin-top:5px;>HEY, '.$first_name_to.'!</h2><h3 style=font-family:Vollkorn,serif;font-size:25px;font-weight:normal;margin-top:10px;>Welcome to the Codebreak family! :)</h3></div></div>';
$message .= '</div></body></html>';

mail($to, $subject, $message, $headers);

I have tried modifying the inline CSS and tried to add double quotes around them (Actually I removed the double quotes because Gmail is adding escape character to them). None of my solution worked, can anyone please help?

Upvotes: 1

Views: 5792

Answers (3)

gwally
gwally

Reputation: 3557

Oswald and Vollkorn are Google web fonts and web fonts do not work at all with Gmail and usually will not work with the many versions of Outlook.

You're going to need to choose a web safe font as a fallback. Impact would be a good backup choice for Oswald along with Georgia as a replacement for Vollkorn.

In addition, your Google Font list has fonts you're not referencing in the email:

https://fonts.googleapis.com/css?family=Alfa+Slab+One|Open+Sans|Chivo:900|Playfair+Display:700|Roboto:400,300,500,700|Oswald:400,500,600,700|Vollkorn:400,700 rel=stylesheet

My suggestion is to remove Alfa Slab, Open Sans, Chivo, Playfair and Roboto to make your style sheet smaller, which should speed up your email rendering in the browser.

The following should be helpful as well:

Good luck.

Upvotes: 2

Shan
Shan

Reputation: 1103

This is what i do, if i need to generate a template that has wide compatibility with Email clients,

  • Signup for a free mailchimp account.
  • Design your template as you wish,
  • Copy paste your template's code(that you had designed) for sending emails.

Upvotes: 1

coderodour
coderodour

Reputation: 1057

This may have something to do with gmail removing the entire HEAD section of the email.

As per the link provided above:

  As a webmail client, Gmail has to take some precautions when displaying an email.
Like most webmail clients, Gmail uses a preprocessor to strip any code from an
email that could be a security threat or interfere with the rendering of the
client interface itself.

  Commonly stripped elements include JavaScript, object and embed tags, and Flash.
Gmail goes one step further and strips out both the head and body tags, as well as
any style tags in an email.

Upvotes: 1

Related Questions