[SOLVED] HTML Email Body Is Empty On iPhone Email Client App

Amazon If you have your own email server that sends out HTML emails to your customers like I do, one day you may notice that the body of your HTML email no longer shows up in the Email app of an iPhone even though the email's body shows up in a web browser on other devices such as a PC or a laptop. Why is that?

I use iPhone 4 and Yahoo email. In my iPhone 4's email app for the Yahoo account, I can see the HTML email's snippet (sender, subject) in the email listing, but when I tap on it, I don't see the email body. I only see the email's header. The email body is blank.

Solution

The problem is that in the HTML email body, I included a link to an external CSS sheet like the following:

<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Rancho|Lato:100,100italic,300,300italic,400,400Italic'/>

Not sure why, but the iPhone's email client app program for Yahoo Mail would not render the email body of the HTML email when it is selected by the user by tapping on it. The email body would be blank even thought it actually exists.

This happens on iPhone 4 and iPhone 5.

However, the iPhone's email app for Gmail would render the email body correctly when the email is selected by the user!

When using a web browser on a PC or a laptop to view emails, this problem does not exist. Incidentally, Yahoo mail seems to ignore external font and always uses its own font-family which is "Helvetica Neue", "Segoe UI", Helvetica,Arial, "Lucida Grande", sans-serif. Gmail actually accepts an external font.

One way to fix it is use an external font only for Gmail email addresses, but that means you treat different email addresses differently. What a nightmare.

A better solution is avoid including external CSS sheets in the HTML email.

Questions? Let me know!