MJML need a special character for work correctly

[LauraSosa]

Describe the bug
I need to put this apostrophe ’ in the code, without this character, MJML doens't recognize many others characters in Outlook

To Reproduce
Steps to reproduce the behavior:

1. Create a file with this MJML code: <mj-wrapper css-class="wrapper" padding="0" background-color="#fff"> <mj-section padding="0"> <mj-column width="100%" padding="5px 0 0 0"> <mj-text align="center" background-color="#fff" color="#000000" font-weight="400" padding="5px 38px 0px 38px" line-height="130%" font-size="24px" font-family="'Barlow Semi Condensed', Arial, sans-serif"> <a href="https://www.google.com/" style="color: #000000; text-decoration: underline;">Dúvidas de como ativar?</a> </mj-text> </mj-column> </mj-section> </mj-wrapper>
2. Render it to HTML by doing '
   
   
   
   
   
   
   
   

   ’ Dúvidas de como ativar?

   
   
   '
3. Send the HTML to an email address with '...'
4. See error

Expected behavior
See the special characters (e.g.: Dúvidas)

MJML environment (please complete the following information):

• OS: [e.g. Windows]
• MJML Version [e.g. 4.9.3]
• MJML tool used [e.g MJML Live App]

Email sending environment(for rendering issues):

• Platform used to send the email [e.g Putsmail]

Affected email clients (for rendering issues):

• Email Client: Outlook

Screenshots

Additional context
Add any other context about the problem here.

[iRyusa]

Hi, Are you sure you're sending the full payload here as in your HTML There's another unfound mj-text ? What did you use to send the email ? I'm not sure this is really related to MJML as this should be displayed when the font doesn't handle accent

[LauraSosa]

This is the full code of the email that not show the special characters:

<mj-preview>This is the hidden sentence</mj-preview>
<mj-title>EMAIL TITLE</mj-title>

<mj-raw>
<style>
    a {
      color: #2098FC;
    }


    
    p {
      font-family:'Helvetica Neue',Helvetica,sans-serif;
    }

    body {
      padding: 10px !important;
      padding: 10px !important;
    }

</style>
</mj-raw>

<mj-breakpoint width="480px" />

      <mj-image align="center" padding="10px 0px 0px 0px" width="600px" src="https://placehold.co/600x300"></mj-image>
      <mj-text padding="20px 38px 20px 38px" align="center" color="#2098FC" font-size="30px" line-height="32px" font-family="'Nutmeg-UltraBlackItalic','Helvetica Neue',Helvetica,sans-serif" font-weight="900" font-style="italic">EXCEPTEUR SINT OCCAECAT DATAT NON PROIDENT</mj-text>
      <mj-text align="center" background-color="#414141" color="#000000" font-weight="400"  padding="0px 38px 20px 38px" line-height="130%"  font-size="17px" font-family="'Helvetica Neue',Helvetica,sans-serif">
        <p>Você tem um prêmio disponível, e nem precisa reclamar para aproveitá-lo.</p>
        <p>in voluptate <span style="color:#2098fc;">velit esse cillum dolore</span> eu fugiat nulla pariatur. Excepteur sint occaecat</p>
      </mj-text>
      <mj-button align="center" background-color="#CC0000" color="#ffffff" font-size="26px" font-weight="700" border-radius="7px" padding="0px 25px 15px 25px" inner-padding="15px 65px 15px 65px" line-height="120%" target="_blank" vertical-align="middle" border="2px solid #E22521 " text-align="center" href="https://www.google.com" font-family="'Nutmeg-UltraBlackItalic','Helvetica Neue',Helvetica,sans-serif" font-style="italic">CTA 1</mj-button>
    </mj-column>
  </mj-section>
</mj-wrapper>
<mj-spacer height="20px" />
<mj-spacer height="20px" />
<mj-wrapper css-class="wrapper" padding="0px 0px 0px 0px" background-repeat="repeat" background-size="auto" border="none" direction="ltr" text-align="center" background-color="#FFFFFF" border-radius="20px">
  <mj-section padding="0px 0px 0px 0px" background-repeat="repeat" background-size="auto" border="none" direction="ltr" text-align="center">
    <mj-column width="100%" padding="5px 0 0 0">
      <mj-text align="center" background-color="#414141" color="#000000" font-weight="400" padding="5px 38px 10px 38px" line-height="130%" font-size="17px" font-family="'Helvetica Neue',Helvetica,sans-serif">
        <p>If you want more bang for your buck with bigger and better bonuses, then its time to go crypto.</p>
        <p><a href="https://www.google.com">Learn more.</a></p>
      </mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<mj-spacer height="20px" />

And this is the full code with the apostrophe added, that show the email correctly:

<mj-preview>This is the hidden sentence</mj-preview>
<mj-title>EMAIL TITLE</mj-title>

<mj-raw>
<style>
    a {
      color: #2098FC;
    }


    
    p {
      font-family:'Helvetica Neue',Helvetica,sans-serif;
    }

    body {
      padding: 10px !important;
      padding: 10px !important;
    }


    .bold {
      font-weight: bold;
      color: #2098FC;
    }
    a.bold{
      text-decoration: underline;
    }
</style>
</mj-raw>

<mj-breakpoint width="480px" />

      <mj-image align="center" padding="10px 0px 0px 0px" width="600px" src="https://placehold.co/600x300"></mj-image>
      <mj-text padding="20px 38px 20px 38px" align="center" color="#2098FC" font-size="30px" line-height="32px" font-family="'Nutmeg-UltraBlackItalic','Helvetica Neue',Helvetica,sans-serif" font-weight="900" font-style="italic">EXCEPTEUR SINT OCCAECAT DATAT NON PROIDENT</mj-text>
      <mj-text align="center" background-color="#414141" color="#000000" font-weight="400"  padding="0px 38px 20px 38px" line-height="130%"  font-size="17px" font-family="'Helvetica Neue',Helvetica,sans-serif">
        <p>Você tem um prêmio disponível, e nem precisa reclamar para aproveitá-lo.</p>
        <p>in voluptate <span style="color:#2098fc;">velit esse cillum dolore</span> eu fugiat nulla pariatur. Excepteur sint occaecat</p>
      </mj-text>
      <mj-button align="center" background-color="#CC0000" color="#ffffff" font-size="26px" font-weight="700" border-radius="7px" padding="0px 25px 15px 25px" inner-padding="15px 65px 15px 65px" line-height="120%" target="_blank" vertical-align="middle" border="2px solid #E22521 " text-align="center" href="https://www.google.com" font-family="'Nutmeg-UltraBlackItalic','Helvetica Neue',Helvetica,sans-serif" font-style="italic">CTA 1</mj-button>
    </mj-column>
  </mj-section>
</mj-wrapper>

<mj-spacer height="20px" />



<mj-spacer height="20px" />

<mj-wrapper css-class="wrapper" padding="0px 0px 0px 0px" background-repeat="repeat" background-size="auto" border="none" direction="ltr" text-align="center" background-color="#FFFFFF" border-radius="20px">

  <mj-section padding="0px 0px 0px 0px" background-repeat="repeat" background-size="auto" border="none" direction="ltr" text-align="center">

    <mj-column width="100%" padding="5px 0 0 0">

      <mj-text align="center" background-color="#414141" color="#000000" font-weight="400" padding="5px 38px 10px 38px" line-height="130%" font-size="17px" font-family="'Helvetica Neue',Helvetica,sans-serif">
        <p>If you want more bang for your buck with bigger and better bonuses, then it’s time to go crypto.</p>
        <p><a href="https://www.google.com">Learn more.</a></p>
      </mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>

<mj-spacer height="20px" />

Without the apostrophe of "then it’s time to go crypto" the email in outlook doesn't work correctly.

The issue is happening only in Outlook, in Gmail is ok, and I'm using Putsmail to send the tests