inliner stripping @font-face?

jiehan1029 commented 4 years ago

I'm using premailer 3.5.0 to inline css to email template. I have been trying to use Google fonts, but never works, even in Apple Mail which is reported to support web fonts.

Here is how I declare the font face in email template:

 <style type="text/css">
    @media screen {
      @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.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;
      }
      body {
          font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
      }
</style>

Sending it to Litmus builder, I found the whole @font-face part was missing. No wonder the email only renders the fallback font (Helvetica). If manually adding the @font-face declaration back in the builder, email renders as expected.

This makes me suspect the inliner is somehow stripping the code. I also tried @import or <link> to google fonts, neither works (not surprising since they essentially does the same thing in the end).

Not sure if my suspect is valid, anyone experienced the same?

peterbe commented 4 years ago

premailer would not be able to put that @font-face thing into the HTML because it doesn't belong to any tag. Your only hope is email clients that allow some <style> tags. But even then, if I was an email program would I dare to trust to download fonts? What if those URLs are to malicious binaries that do bad stuff.

Has web fonts ever worked in an HTML email? If so, can you open its "View source" and inspect its full HTML?

jiehan1029 commented 4 years ago

@peterbe Definitely a valid concern regarding the downloads. I myself have not any working example of web fonts in email, but there're a lot articles online showing how to use them, for example this one https://litmus.com/blog/the-ultimate-guide-to-web-fonts. I'm curious.

jiehan1029 commented 4 years ago

@peterbe and thanks for your hint about the <style> tag! Ok, tried to remove the inlining step and tested again. This time the web fonts works (in Apple Mail). But in outlook and gmail other stylings inside <style> tag were not applied. So seems the only way to use Google fonts is to skip the automatic inlining, put font import inside <style>, then manually inline all other stylings. Far from a convenient solution, but at least a workaround.

peterbe commented 4 years ago

I'm not sure I follow but I'm pretty sure the best bet it is to ship an HTML email that looks like this:

<html>
  <head>
    <style>p { color: red }</style>
  </head>
  <body>
    <p style="color: red">Text</p>
  </body>
</html>

from premailer import transform
print(transform(html, keep_style_tags=True))

That way, email clients that strip and ignore anything other than the content of the <body> tag, they get their stuff formatted somewhat. And for email clients that can keep and respect the <style> tag they can put in luxurious features such as fancy media queries or @font-face stuff.

jiehan1029 commented 4 years ago

works like a charm. Thank you a lot!!

peterbe commented 4 years ago

works like a charm.

What worked? Web fonts in Outlook? Gmail?

jiehan1029 commented 4 years ago

Sorry for the late response. AppleMail and outlook in mac work. Not in outlook app/ outlook ios / windows mail / gmail app. The latter ones ignore style tag. Not expecting good compatibility anyway, it's bonus point, so I'm pretty satisfied given the code change is minimal!

peterbe commented 4 years ago

Great stuff!

alexpeits commented 9 months ago

Sorry to reopen - since some email clients support @font-face, wouldn't it make sense to handle it the same way @media is handled and preserve it?

peterbe commented 9 months ago

wouldn't it make sense to handle it the same way @media is handled and preserve it?

That sounds very sensible. If @media can go into the style attribute, perhaps why not @font-face.

Just for the record, I'm not coding on this project. So if you'd need that, perhaps a contribution PR.

peterbe / premailer

inliner stripping @font-face? #236