CODEWITHSUNDEEP
fontsmjml
Beatriz Rachel
Beatriz Rachel

Reputation: 19

Font-family from google fonts doesn't work in MJML

I am having trouble with using a google font on mjml.io even though I followed the instructions. I tried some fonts, only for test purposes, but only the second one works. But the font I actually need to use is "Source Sans 3". Seems like it only accepts fonts with a single word name?

The font I need to make work:

The fonts I used for testing:

Código

Upvotes: 0

Views: 335

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17316

You need to enclose family names in additional quotes like so:

font name=""Source Sans 3""

or

font name="'Source Sans 3'"

As an alternative you could also create your own family name by copying the @font-face rule from the CSS query result and paste it to your <mj-style>

<mjml>
  
  <mj-head>  
    <mj-style>
@font-face {
  font-family: 'customFont';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesans3/v15/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Ky462EK9Cs.woff2) format('woff2');
}
    </mj-style>
  </mj-head>
  
  
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-text font-size="20px" color="#F45E43" font-family="customFont">Hamburgle</mj-text>

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

<mjml>
  
  <mj-head>
    <mj-font name="'Source Sans 3'" href="https://fonts.googleapis.com/css?family=Source+Sans+3" />
    <mj-font name="&quot;Open Sans&quot;" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <mj-font name="'Advent Pro'" href=" https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,400;0,700;1,400;1,700" />
    
    <mj-style>
@font-face {
  font-family: 'customFont';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesans3/v15/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Ky462EK9Cs.woff2) format('woff2');
}
    </mj-style>
  </mj-head>
  
  
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-text font-size="20px" color="#F45E43" font-family="'Source Sans 3'">Hamburgle</mj-text>
        <mj-text font-size="20px" color="#F45E43" font-family="&quot;Open Sans&quot;">Hamburgle</mj-text>
        <mj-text font-size="20px" color="#F45E43" font-family="customFont">Hamburgle</mj-text>

        <mj-text font-size="20px" color="#F45E43" font-family="'Advent Pro'" font-style="italic">Hamburgle</mj-text>
        <mj-text font-size="20px" color="#F45E43" font-family="'Advent Pro'" font-style="italic" font-weight="700">Hamburgle</mj-text>


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

Keep in mind a query like See preview on mjml.io

Upvotes: 0

Related Questions