`mj-font` only emits the last style sheet for the font family #2849

jlarmstrongiv · 2024-04-03T17:14:08Z

Describe the bug
mj-font is a smart component. Perhaps too smart in some cases.

I am using fontsource to host fonts on my local website. Here is an example package:

Fontsource packages for all fonts on Google Fonts, plus others fonts. They are popular for self-hosting fonts.

However, the problem with fontsource, typefaces, and other npm packages that allow local installation is that they bundle their CSS files by weight, italics, etc. without having an all or complete file for all font weights, italics, etc. So, to render noto sans with italics, you need two stylesheets:

import '@fontsource-variable/noto-sans/wght-italic.css';
import '@fontsource-variable/noto-sans';

This conflicts with mj-font, which seems to expect the name attribute to be unique. If two mj-font tags have the same name, then only the last stylesheet is emitted. Plus, if a suffix is added to the name attribute to make it unique, that font tag output will be omitted because it must be used somewhere in the email as a fontFamily attribute.

To Reproduce
Steps to reproduce the behavior:
See https://mjml.io/try-it-live/xuL4GmhZOp

Code sample

MJML

<mjml>
  <mj-head>
    <!-- Google fonts used for demonstration purposed -->
    <!-- Different font names used to represent different font family groups, likea stylesheet for italics or a stylesheet condensed -->
    
    <!-- the first declaration is not emitted -->
    <mj-font name="Raleway"
      href="https://fonts.googleapis.com/css?family=Raleway" />
    <!-- this second declartion is emitted successfully -->
    <mj-font name="Raleway"
      href="https://fonts.googleapis.com/css?family=Nunito" />
    <!-- trying to include the font under a different name is not emitted, as it is not referenced in the email -->
    <mj-font name="Raleway with italics"
      href="https://fonts.googleapis.com/css?family=Lato" />

  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-text font-size="20px" color="#F45E43" font-family="Raleway">Hello World</mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Compiled HTML output

<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style type="text/css">#outlook a { padding:0; }
          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
          p { display:block;margin:13px 0; }</style><!--[if mso]>
        <noscript>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        </noscript>
        <![endif]--><!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css"><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Nunito);</style><!--<![endif]--><style type="text/css">@media only screen and (min-width:480px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
      }</style><style media="screen and (min-width:480px)">.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }</style><style type="text/css"></style><!-- Google fonts used for demonstration purposed --><!-- Different font names used to represent different font family groups, likea stylesheet for italics or a stylesheet condensed --><!-- the first declaration is not emitted --><!-- this second declartion is emitted successfully --><!-- trying to include the font under a different name is not emitted, as it is not referenced in the email --></head><body style="word-spacing:normal;"><div><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tbody><tr><td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Raleway;font-size:20px;line-height:1;text-align:left;color:#F45E43;">Hello World</div></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></div></body></html>

Expected behavior
Defining mj-font with two stylesheets for the same font family name should emit two stylesheet references

MJML environment (please complete the following information):

OS: All
MJML Version: 4.15.3
MJML tool used: Try it live, mjml-react

Email sending environment(for rendering issues):

N/A

Affected email clients (for rendering issues):

Email Client: any that support fonts
OS: All
Browser: All

The text was updated successfully, but these errors were encountered:

iRyusa · 2024-04-03T17:40:34Z

Would be ok to treat as an "array" of import instead of a single string for me. Even if it's not a common case there's no need to keep current behavior. We could add an extra flag to mj-font to force importing the font too but I don't think this is the right approach

…

On Wed, Apr 3, 2024 at 7:14 PM John L. Armstrong IV < ***@***.***> wrote: *Describe the bug* mj-font is a smart component. Perhaps too smart in some cases. I am using fontsource to host fonts on my local website. Here is an example package: - variable ***@***.***/open-sans - static ***@***.***/open-sans Fontsource packages for all fonts on Google Fonts, plus others fonts. They are popular for self-hosting fonts. However, the problem with fontsource, typefaces, and other npm packages that allow local installation is that they bundle their CSS files by weight, italics, etc. without having an all or complete file for all font weights, italics, etc. So, to render noto sans with italics, you need two stylesheets: import ***@***.***/noto-sans/wght-italic.css'; import ***@***.***/noto-sans'; This conflicts with mj-font, which seems to expect the name attribute to be unique. If two mj-font tags have the same name, then only the last stylesheet is emitted. Plus, if a suffix is added to the name attribute to make it unique, that font tag output will be omitted because it must be used somewhere in the email as a fontFamily attribute. *To Reproduce* Steps to reproduce the behavior: See https://mjml.io/try-it-live/xuL4GmhZOp Code sample MJML <mjml> <mj-head>    <mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />  <mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Nunito" />  <mj-font name="Raleway with italics" href="https://fonts.googleapis.com/css?family=Lato" /> </mj-head> <mj-body> <mj-section> <mj-column> <mj-text font-size="20px" color="#F45E43" font-family="Raleway">Hello World</mj-text> </mj-column> </mj-section> </mj-body></mjml> Compiled HTML output <!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style type="text/css">#outlook a { padding:0; } body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; } img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; } p { display:block;margin:13px 0; }</style><link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css"><style ***@***.*** url(https://fonts.googleapis.com/css?family=Nunito);</style><style ***@***.*** only screen and (min-width:480px) { .mj-column-per-100 { width:100% !important; max-width: 100%; } }</style><style media="screen and (min-width:480px)">.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }</style><style type="text/css"></style></head><body style="word-spacing:normal;"><div><div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tbody><tr><td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Raleway;font-size:20px;line-height:1;text-align:left;color:#F45E43;">Hello World</div></td></tr></tbody></table></div></td></tr></tbody></table></div></div></body></html> *Expected behavior* Defining mj-font with two stylesheets for the same font family name should emit two stylesheet references *MJML environment (please complete the following information):* - OS: All - MJML Version: 4.15.3 - MJML tool used: Try it live, mjml-react *Email sending environment(for rendering issues)*: - N/A *Affected email clients (for rendering issues):* - Email Client: any that support fonts - OS: All - Browser: All — Reply to this email directly, view it on GitHub <#2849>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTNHPSGPXYKQHZBOWZ3Y3Q2HNAVCNFSM6AAAAABFVXK3RSVHI2DSMVQWIX3LMV43ASLTON2WKOZSGIZDGNBXGM4TMNA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`mj-font` only emits the last style sheet for the font family #2849

`mj-font` only emits the last style sheet for the font family #2849

jlarmstrongiv commented Apr 3, 2024

iRyusa commented Apr 3, 2024 via email

mj-font only emits the last style sheet for the font family #2849

mj-font only emits the last style sheet for the font family #2849

Comments

jlarmstrongiv commented Apr 3, 2024

iRyusa commented Apr 3, 2024 via email

`mj-font` only emits the last style sheet for the font family #2849

`mj-font` only emits the last style sheet for the font family #2849