Google mail doesnt display fonts correctly

[PieterUyz]

Describe the bug
A clear and concise description of what the bug is.

Gmail doenst display Outfit font family with mjml -> https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900

Is there a list of supported fonts or is there a a way to make the above font supported ?

To Reproduce

 <mjml>
    <mj-head>
      <mj-font name="Outfit" href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900" />
    </mj-head>
    <mj-body background-color="#F4F8FB">
      <mj-section>
        <mj-column background-color="#F4F8FB">
          <mj-image width="300px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png"></mj-image>
        </mj-column>
      </mj-section>
      <mj-section background-color="#FFFFFF">
        <mj-column>
          <mj-text font-family="Outfit, Ubuntu" font-size="24px" font-weight="500"  line-height="34px">
            Forgotten your password ?
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-color="#FFFFFF">
        <mj-column>
          <mj-text font-size="16px" line-height="24px" font-family="Outfit, Ubuntu" font-weight="300">We have recieved your reset password request, please click on the "Change password" button below, make sure to have a look at the following rules</mj-text>
          <mj-text font-size="16px" line-height="24px"  font-family="Outfit, Ubuntu" font-weight="300">
            Your new password must include:</mj-text>
          <mj-text font-size="16px"  line-height="24px"  font-family="Outfit, Ubuntu" font-weight="300">
            <li>10 - 46 characters</li>
            <li>At least 2 mixed-case letter</li>
            <li>At least 3 number</li>
          </mj-text>
          <mj-text css-class font-size="16px"  font-family="Outfit, Ubuntu" font-weight="300">
            If you did not initiate this password reset, please contact us.</mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-color="#FFFFFF">
        <mj-column>
          <mj-text font-family="Outfit, Ubuntu" font-size="16px"  font-weight="300">
            Thanks,
          </mj-text>
          <mj-text font-family="Outfit, Ubuntu" font-size="16px"  font-weight="300">
            The <span style="font-weight: 600">Test Team</span>
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-color="#FFFFFF">
        <mj-column>
          <mj-button background-color="#da2028" font-family="Outfit, Ubuntu" width="100%" border-radius="4px" height="50px" font-size="18px" href="/">Change Password</mj-button>
        </mj-column>
      </mj-section>
      <mj-section background-color="black">
        <mj-column width="25%">
          <mj-button height="15px" font-family="Outfit, Ubuntu" background-color="black" href="/" padding="0">Privacy Policy</mj-button>
        </mj-column>
        <mj-column width="50%">
          <mj-button height="15px" font-family="Outfit, Ubuntu" background-color="black" href="/" padding="0">© Copyright 2022 Test</mj-button>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>

Expected behavior
Should display fonts in gmail

MJML environment (please complete the following information):

• OS: Windows & Mac
• MJML Version: 4.13.0
• MJML tool used: https://mjml.io/try-it-live/

Email sending environment(for rendering issues):

• Gmail

Affected email clients (for rendering issues):

• Email Client: Gmail
• OS: Windows & Mac
• Browser: Firefox, Safari, Chrome

Additional context
Works perfectly everywhere else but not in Gmail (Google mail in browser)

[iRyusa]

Gmail doesnt support external font that's why

…

On Wed, Dec 28, 2022 at 1:38 PM Pieter Uys ***@***.***> wrote: *Describe the bug* A clear and concise description of what the bug is. Gmail doenst display Outfit font family with mjml -> ***@***.***;200;300;400;500;600;700;800;900 Is there a list of supported fonts or is there a a way to make the above font supported ? *To Reproduce* Forgotten your password ? We have recieved your reset password request, please click on the "Change password" button below, make sure to have a look at the following rules Your new password must include: - 10 - 46 characters - At least 2 mixed-case letter - At least 3 number If you did not initiate this password reset, please contact us. Thanks, The Test Team Change Password Privacy Policy © Copyright 2022 Test *Expected behavior* Should display fonts in gmail *MJML environment (please complete the following information):* - OS: Windows & Mac - MJML Version: 4.13.0 - MJML tool used: https://mjml.io/try-it-live/ *Email sending environment(for rendering issues)*: - Gmail *Affected email clients (for rendering issues):* - Email Client: Gmail - OS: Windows & Mac - Browser: Firefox, Safari, Chrome *Additional context* Works perfectly everywhere else but not in Gmail (Google mail in browser) — Reply to this email directly, view it on GitHub <#2612>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTMNHZK2QK4HZFL2VALWPQYDVANCNFSM6AAAAAATLHJFOM> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[PieterUyz]

So do I need to download the fonts from google fonts and add it inside my mjml template @iRyusa ? I am using google fonts as said that mjml supports google fonts ?

[iRyusa]

There's no way to support external font in gmail, only Roboto is supported as gmail use it as a font for their interface.

…

On Wed, Dec 28, 2022 at 3:08 PM Pieter Uys ***@***.***> wrote: So do I need to download the fonts from google fonts and add it inside my mjml template ? — Reply to this email directly, view it on GitHub <#2612 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTLBUMGJ6TTWMWPOVRLWPRCWVANCNFSM6AAAAAATLHJFOM> . You are receiving this because you commented.Message ID: ***@***.***>