search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
17.04k stars 959 forks source link

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

Open jlarmstrongiv opened 6 months ago

jlarmstrongiv commented 6 months ago

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 ```html Hello World ``` Compiled HTML output ```html
Hello World
```

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):

Email sending environment(for rendering issues):

Affected email clients (for rendering issues):

iRyusa commented 6 months ago

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

Hello World

Compiled HTML output

<!doctype html><style @. url(https://fonts.googleapis.com/css?family=Nunito);<style @. only screen and (min-width:480px) { .mj-column-per-100 { width:100% !important; max-width: 100%; } }

Hello World

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 https://github.com/mjmlio/mjml/issues/2849, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELHTNHPSGPXYKQHZBOWZ3Y3Q2HNAVCNFSM6AAAAABFVXK3RSVHI2DSMVQWIX3LMV43ASLTON2WKOZSGIZDGNBXGM4TMNA . You are receiving this because you are subscribed to this thread.Message ID: @.***>