Enable to load custom fonts

[arnaudbreton]

Following up on issues #49 and #19, we want to provide MJML users with a way to define and use custom fonts in their MJML markup. The idea here is to discuss openly here and to settle on a final implementation by the end of the week.

A new mj-font tag is introduced, allowing to render a cross-clients valid HTML code to load custom fonts. The new tag markup could be the following:

<mj-font href="...">

In order to separate such meta definition from the content itself, a new mjml root tag, along with mj-head are introduced and described in details in issue #78.

[trolologuy]

Excuse me, where is this supposed to be located? in the mj-head?

[arnaudbreton]

@trolologuy correct yes, I've updated the description.

[trolologuy]

@arnaudbreton thanks for the answer, so i did add the <mj-head> <mj-font href="https://fonts.googleapis.com/css?family=Pacifico"> </mj-head> in my mjml file.
Later on, in the text i referred to the font as <mj-text align="center" font-family="Pacifico"> .
When i generate the html, i don't have any warning, but i don't get the font to get loaded either :/
What am i doing wrong?

[baptistebriel]

Any news on this? Is it already possible to use custom fonts within mjml?

[J-J-A]

+1

[selrond]

+1 here - any news?

[J-J-A]

I saw you released the font-feature in Version 1.3. When is it going to be out?

[rogierslag]

👍 Would love the feature

[jaypeedevlin]

+1

[jitendravyas]

Quite limited clients support custom fonts though https://www.campaignmonitor.com/dev-resources/will-it-work/webfonts/

[Grafikart]

Still it would be a usefull feature, I can understand if it's not put inside the core but it would be nice to be able to add custom element within the head too.

I noticed there was an registerMJHeadElement method that could be usefull but unfortunately it's not possible to inject code. Here is ideas

// Give us the ability to inject arbitrary html within the head
registerMJHeadElement('gfont', function (options) {
  return `<link href="https://fonts.googleapis.com/css?family=${options.attribs.name}" rel="stylesheet" type="text/css"/>`
})

// Stick with the same process used for registering classic Element
import gfont from 'custom/component/gfont'
registerMJHeadElement(gfont)

I looked into the core and saw something leading me to believe we can use fonts here https://github.com/mjmlio/mjml/blob/master/packages/mjml-core/src/configs/defaultContainer.js#L18

[iRyusa]

You can now easily import fonts in MJML 2.3 ! They're added on the fly if used, documentation is here https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-font/README.md and will be available on the website tomorrow !

[joseGuisado]

Hi! A question, Can I use a custom font but the font is not a google font? Whit a archive .ttf?
Thank you

[iRyusa]

Hi @joseGuisado

You can check this article about using non-google font in email https://www.campaignmonitor.com/blog/email-marketing/2012/12/using-web-fonts-in-email/

[jdozierezell]

Most of MJML is working great for me (which is saying something), but I'm running into an issue with mj-font and mailchimp. This issue was raised in #22 but doesn't seem to have been resolved. Any solution that I'm missing? Thanks!

[iRyusa]

Well this is an issue from Mailchimp side and not from MJML code. We're importing font the safest way to prevent any trouble with Outlook & other clients. Some people got it to works when disabling the mailchimp CSS Inliner but I don't know if the option is still available

[dalefish]

Mailchimp response to this was: web-fonts are poorly supported so we don't support @import. Kind Regards, :----------------------------: Dale McConnell

…

On 27 January 2017 at 17:15, Maxime Brazeilles ***@***.***> wrote: Well this is an issue from Mailchimp side and not from MJML code. We're importing font the safest way to prevent any trouble with Outlook & other clients. Some people got it to works when disabling the mailchimp CSS Inliner but I don't know if the option is still available — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#80 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKxLOMEZXCYfGEp2KCsc6YJYodwHL76nks5rWhgigaJpZM4Hfbx8> .