Mjml: How to correctly load local font

[ghost]

I am trying to load a custom font which is included in the project folder and not via a link e.g. from google fonts. I was trying to load the font as described in this article

https://stackoverflow.com/questions/53959234/can-not-import-font-into-mjml

with @font-face in the <mj-style> tag but it's not working.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="headline" font-size="40px" line-height="48px" color="#000" font-family="Jubilat" font-weight="900" padding="0" />
    </mj-attributes>
    <mj-style>
      @font-face {
        font-family: "Jubilat";
        src: url("../assets/fonts/JubilatMedium.woff") format("woff");
        font-weight: 500;
        font-style: normal;
      }
      ...
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-wrapper >
      <mj-section>
        <mj-column>
          <mj-text mj-class="headline">Verification has been successful!</mj-text>
           ...
       </mj-column>
     </mj-section>
   </mj-wrapper>
 </mj-body>
</mjml>

Is it possible at the moment to load custom fonts?

[iRyusa]

You shouldn't use mj style to import font with font face like that as outlook will fallback to Times directly.

You should point to a css file where font-face is declared as google font does. If it doesn't work it might not be able to access provided path of your font. Check network tab in browser console.

[ghost]

Thanks for the hint, @iRyusa ... unfortunately it still doesn't seem to work. Does MJML accept any font-format (e.g. woff, woff2 etc.) or does it have to be a specific one?

[iRyusa]

MJML transpile to HTML so that's not related to MJML here.

As said, first check if your browser fail to load it (random url to illustrate) :

[ghost]

Ah sorry, I didn't know you were talking about the web editor. I edit my files in vscode and I see in the preview that it's not working. I put everything in a style.mjml and within t hat file I put all my css within the <mj-style> tag. It does load it correctly when I import it in the <mj-include path="./style.mjml" /> tag in the head - but not the fonts.

It seems tricky to load fonts that are not provided by an url. Is there any link in the docs you can provide which I might missed? Thanks!

[iRyusa]

Same answer then it depends where the HTML is rendered within the vscode frame, relative path might not be relative as where you think. It would do the same for image I guess. Mj include are resolved by MJML engine, css include by the browser.

On 4 May 2020, at 20:02, Marcus Zierke [e-mail] wrote:


Ah sorry, I didn't know you were talking about the web editor. I edit my files in vscode and I see in the preview that it's not working. I put everything in a style.mjml and within t hat file I put all my css within the tag. It does load it correctly when I import it in the tag in the head - but not the fonts.

It seems tricky to load fonts that are not provided by an url. Is there any link in the docs you can provide which I might missed? Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[ajimae]

How about this issue? Is anything being done to allow us use custom (.ttf) within mjml

[GarryFlemings]

Might you put some code demonstrating the challenge in https://mjml.io/try-it-live? And put the URL on https://mjml.slack.com/?

We wouldn't be surprised if you stored your custom font on a web-accessible path. (You can't use local storage for the same reason you can't use local storage for images. The computer running the email client doesn't share local storage with your computer.)

We wouldn't be surprised if you also stored there (or somewhere web-accessible) a CSS file like the one pointed to in https://documentation.mjml.io/#mj-font. That one is https://fonts.googleapis.com/css?family=Raleway. If you put that latter URL in a browser you'll see a series of @font-face CSS statements; each of those refers to a font file. Maybe you'd only need one of those statements; your pick. More info at https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face.

If you show the MJML team code that does that and doesn't use your font, you'll get a good answer from them as to why. Of course, if you try the same techniques first in an HTML-only program and they don't work, MJML is unlikely to be able to work because it depends entirely on HTML.