mj-font tag generated HTML doesn't render webfonts on MacOS/iOS devices

[QuietSpecialist]

Due to the addition of type="text/css" to the <link> tag, when using the mj-font shorthand tag, the generated HTML doesn't render webfonts on MacOS/iOS devices.

To reproduce

1. Create a file with this MJML code:

<mjml>
  <mj-head>
    <mj-font href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" name="Source Sans Pro" />
    <mj-attributes>
      <mj-all font-family="Source Sans Pro" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-text font-size="72px">
      Hello World!
    </mj-text>
  </mj-body>
</mjml>

2. Test generated code in Litmus (https://litmus.com)

Expected behaviour
The Source Sans Pro webfont should render. Instead the default email client font is used.

MJML environment

• OS: MacOS
• MJML Version: 4.1.2
• MJML tool used: MJML App 2.10.0

Email sending environment (for rendering issues)

• Platform used to send the email: n/a

Affected email clients (for rendering issues)

• Apple Mail 10 (macOS 10.12)
• iPad (Retina) (iOS 11.0)
• iPad Mini (iOS 11.0)
• iPhone 6s (iOS 10.3)
• iPhone 6s Plus (iOS 10.3)
• iPhone 7 (iOS 11.3.1)
• iPhone 7 Plus (iOS 11.3.1)
• iPhone SE (iOS 11.3.1)

Additional context
Whilst the type attribute is supported by the <link> tag, removing it results in the webfont rendering on MacOS/iOS devices with no impact on other email clients.

[iRyusa]

Can you provide those screenshot on Litmus ? Because on my actual iphone X the font render just fine with latest mjml version & same with email on acid

…

On Thu, Jan 17, 2019 at 9:32 PM digitaldots ***@***.***> wrote: Due to the addition of type="text/css" to the <link> tag, when using the mj-font shorthand tag, the generated HTML doesn't render webfonts on MacOS/iOS devices. *To reproduce* 1. Create a file with this MJML code: <mjml> <mj-head> <mj-font href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" name="Source Sans Pro" /> <mj-attributes> <mj-all font-family="Source Sans Pro" /> </mj-attributes> </mj-head> <mj-body> <mj-text font-size="72px"> Hello World! </mj-text> </mj-body> </mjml> 1. Test generated code in Litmus (https://litmus.com) *Expected behaviour* The Source Sans Pro webfont should render. Instead the default email client font is used. *MJML environment* - OS: MacOS - MJML Version: 4.1.2 - MJML tool used: MJML App 2.10.0 *Email sending environment (for rendering issues)* - Platform used to send the email: n/a *Affected email clients (for rendering issues)* - Apple Mail 10 (macOS 10.12) - iPad (Retina) (iOS 11.0) - iPad Mini (iOS 11.0) - iPhone 6s (iOS 10.3) - iPhone 6s Plus (iOS 10.3) - iPhone 7 (iOS 11.3.1) - iPhone 7 Plus (iOS 11.3.1) - iPhone SE (iOS 11.3.1) *Additional context* Whilst the type attribute is supported by the <link> tag, removing it results in the webfont rendering on MacOS/iOS devices with no impact on other email clients. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1492>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAizzV17rzKkoVkSJ2eEStnUr60x5F-_ks5vEN3GgaJpZM4aGrcW> .

-- Cordialement, *Maxime BRAZEILLES*

[QuietSpecialist]

Here you go…

Apple Mail 10 (macOS 10.12):

iPad (Retina) (iOS 11.0):

iPad Mini (iOS 11.0):

iPhone 6s (iOS 10.3):

iPhone 6s Plus (iOS 10.3):

Phone 7 (iOS 11.3.1):

iPhone 7 Plus (iOS 11.3.1):

iPhone SE (iOS 11.3.1):

Appreciate this could be an issue with the Litmus servers.

[iRyusa]

Any chance that you're inlining your email on litmus ? That could lead to issue too 🤔
This is a screenshot on an actual device:

[iRyusa]

And here's Apple mail, no issue too 🤔

[QuietSpecialist]

I'm not sure what "inlining your email on litmus" means? Is this a setting in Litmus you're referring to?

The font-family style is applied inline to the div tag but this has been auto generated by the MJML app.

[iRyusa]

I no longer use litmus, but there's a box somewhere where it can inline your styles for you, altering the html it might be that ?

[QuietSpecialist]

Ah, can't see it. Might have been removed but I'm happy to close regardless.

Just run a test using an Email on Acid test account and can confirm it's working okay so going to assume this is a Litmus issue.

Thanks for looking into.