mjml font issue

[ygrenzinger]

Hello,

the short version of this issue is that mjml font href is not taken into account and fallback to Ubuntu font.

I don't know where it's coming from because the JSON description built by the lib is fine but the html rendered is not.

Thanks for the help,

The longer version below.

With this mjml-react code:

<Mjml>
      <MjmlHead>
        <MjmlFont
          name="Public Sans"
          href="https://fonts.googleapis.com/css2?family=Public+Sans&display=swap"
        />
        <MjmlAll font-family="'Public Sans', sans-serif" />
      </MjmlHead>
      <MjmlBody width={500}>
        <MjmlSection backgroundColor="#FFF6F5">
          <MjmlColumn>
            <MjmlText>
              <p>Enjoy</p>
            </MjmlText>
          </MjmlColumn>
        </MjmlSection>
      </MjmlBody>
    </Mjml>

I have this at the end:

<!--[if !mso]><!-->
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
  <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
  </style>
  <!--<![endif]-->

[emmclaughlin]

I think this is an issue with the mjml structure. I am able to reproduce the fallback to Ubuntu font with the code you provided. However, the only place I see mj-all in the mjml docs is nested inside of an mj-attributes (see here). So if you adjust your code to wrap the MjmlAll with a MjmlAttributes it should work as you expect:

<MjmlHead>
  ...someMjmlFontTag
  <MjmlAttributes>
    <MjmlAll font-family="Public Sans, sans-serif" />
  </MjmlAttributes>
</MjmlHead>

[ygrenzinger]

Oh thanks ! Yes when I used directly mjml I put this mj-all tag into mj-attributes tag. I missed it when during the transition to mjml-react