Some CSS of my PHP HTML e-mail form don't get into the mail form

Question

I am sending a email with PHPMailer, but aspects of the form CSS do not get into the Mail when send:

Justify-content: center;
align-items: center
And the font-family.
outline-offset: 5px;

Does anyone can tell me why are these CSS not getting into the sent email form, while all the others load with not problem?

If I enter those values in the console, they work, so I don't understand why these CSS values are being delete from the DOM when the mail is sent.

This is my code:

<style>@import url("https://fonts.googleapis.com/css2?family=Thasadith:ital,wght@0,400;0,700;1,400;1,700&display=swap");</style>
        <div style="background-color: #ffffff; margin: auto; width: 65%; border: 1px solid #e1e1e1; outline: 1px solid #e1e1e1; outline-offset: 5px; margin-top: 25px; margin-bottom: 25px;padding: 5px;">
                <div style="display: flex; justify-content: center; align-items: center; background-color: #f35653; margin-bottom: 20px; padding: 30px 0px;">
                <div style="background-image: url(https://i.imgur.com/XPTHrId.png); background-position: center; background-size: cover; width: 50px; height: 50px;"></div>
                <div style="font-size: 40px; text-transform: uppercase; align-self: center; color: white; font-family: Thasadith, sans-serif; font-weight: 700; margin-left: 5px;">Enkou Academy</div></div>
                <div style="padding: 10px 40px 40px;font-size: 15px;">
                <p>We received a request to reset the password for your Enkou Academy account.<br><br>
                To reset the password, click on the link below:<br><br>
                <a href="' . $url . '" style="text-decoration: none; color: #f35652;">Click here!</a><br><br>
                If you didn&#39;t request a password reset, let us know.</p>
                </div>
        </div>'

I suspect that `display: flex` simply [isn't generally supported by email clients](https://stackoverflow.com/q/43736008/328193) — David, Jun 29 '20 at 16:39
@David Then, what about the outline-offset and the font-family? :( — Elena, Jun 29 '20 at 16:40
`outline-offset` may also be too modern for email client. `font-family` wouldn't be, but can you confirm that the email client would be aware of that font? The less generic the font, the less likely. Basically, email is not a web browser. And HTML email templates are *extremely limited* in their capabilities. — David, Jun 29 '20 at 16:43
Most email clients use a VERY OLD browser version and therefore dont understand various CSS. Also you have to use inline CSS as almost none will pick up CSS from a STYLE tag — RiggsFolly, Jun 29 '20 at 16:49
You can't use remote CSS at all in email, so that google font request won't work. Gmail strips classes, hotmail strips everything outside the body tag. HTML for email is hard! — Synchro, Jun 29 '20 at 16:53

score 0 · Accepted Answer · answered Jul 01 '20 at 00:05

Email programs only support a limited subset of CSS. Check out https://www.caniemail.com/ for these.

Flex is supported on Apple Mail and Gmails, but is not supported in Outlooks, Yahoo, AOL https://www.caniemail.com/search/?s=flex. This is why we still write emails using tables!

font-family will work, but you'll find better support if you go to that url (https://fonts.googleapis.com/css2?family=Thasadith:ital,wght@0,400;0,700;1,400;1,700&display=swap) and copy the @font-face into the <style>. Even then, your custom font will only show on Apple, Samsung, and a couple of others: https://www.caniemail.com/search/?s=font-face

E.g. write this:

<style type="text/css">
@font-face {
  font-family: 'Thasadith';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Thasadith Italic'), local('Thasadith-Italic'), url(https://fonts.gstatic.com/s/thasadith/v3/mtG-4_1TIqPYrd_f5R1osnMX-CE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
mso-font-alt: Arial;
}
</style>

Note the addition of the Outlook font fallback (mso-font-alt).

Thank you so much for all the information, it helps me a lot! — Elena, Jul 01 '20 at 00:53

Some CSS of my PHP HTML e-mail form don't get into the mail form

1 Answers1