Fonts are not added to the markup

[zietbukuel]

Hello guys I'm using Mautic with GrapesJS and I've been able to add my own Fonts (I see them in the dropdown), but the font URL is not added anywhere to the markup. Here's my code:

initEmailMjml() {
    const components = mjmlService.getOriginalContentMjml();
    // validate
    mjmlService.mjmlToHtml(components);

    this.editor = grapesjs.init({
      clearOnRender: true,
      container: '.builder-panel',
      components,
      height: '100%',
      storageManager: false,
      assetManager: this.getAssetManagerConf(),
      plugins: [grapesjsmjml, grapesjspostcss, grapesjsmautic, 'gjs-plugin-ckeditor'],
      pluginsOpts: {
        //grapesjsmjml: {},
        grapesjsmautic: BuilderService.getMauticConf('email-mjml'),
        'gjs-plugin-ckeditor': BuilderService.getCkeConf(),
        grapesjsmjml: {
          // not working
          fonts: {
            Montserrat: 'https://fonts.googleapis.com/css2?family=Montserrat',
            'Open Sans': 'https://fonts.googleapis.com/css2?family=Open+Sans',
            'Shadows Into Light': 'https://fonts.googleapis.com/css2?family=Shadows+Into+Light',
            'Rock 3D': 'https://fonts.googleapis.com/css2?family=Rock+3D',
            'Rubik Glitch': 'https://fonts.googleapis.com/css2?family=Rubik+Glitch',
          },
        },
      },
      /* canvas: {
        styles: ['https://fonts.googleapis.com/css2?family=Rock+3D|Shadows+Into+Light|Open+Sans|Montserrat|Rubik+Glitch']
      }, */
    });

    // add custom fonts options on editor's font list
    this.editor.on('load', () => {
      let styleManager = this.editor.StyleManager;
      let fontProperty = styleManager.getProperty('typography', 'font-family');

      let list = fontProperty.get('list');
      fontProperty.set('list', list);

      // custom list
      list.push(fontProperty.addOption({ value: 'Montserrat, sans-serif', name: 'Montserrat' }));
      list.push(fontProperty.addOption({ value: 'Open Sans, sans-serif', name: 'Open Sans' }));
      list.push(fontProperty.addOption({ value: 'Shadows Into Light, sans-serif', name: 'Shadows Into Light' }));
      list.push(fontProperty.addOption({ value: 'Rock 3D, cursive', name: 'Rock 3D' }));
      list.push(fontProperty.addOption({ value: 'Rubik Glitch', name: 'Rubik Glitch' }));
      fontProperty.set('list', list);

      styleManager.render();
    });

    this.editor.BlockManager.get('mj-button').set({
      content: '<mj-button href="https://">Button</mj-button>',
    });

    return this.editor;
  }

Please let me know if I'm missing something or if this is a bug. Thanks.

[adiux]

The editor gets the mjml for conversion to HTML in the preset:

But I don't remember if it gets the as well. Or if it is even saved. Maybe that was a limitation for grapesjs-mjml.

[zietbukuel]

I've been testing this outside Mautic and it doesn't seem to be a problem in the preset as you suggested. I think the issue is actually in the grapesjs-mjml library. I've created this fiddle so you can test, I was able to replicate this here as well as my own server:

https://jsfiddle.net/zietbukuel/m1vcjgn5/2/
https://grapesjs.planleftdev.com/

[zietbukuel]

Can someone please give me some directions on how to fix this issue? Me and my team are willing to provide a PR to get this fixed, I just need some directions. Thanks.

[kiyah]

Anything we can do to bump this up?

[lechuhuuha]

Can someone please give me some directions on how to fix this issue? Me and my team are willing to provide a PR to get this fixed, I just need some directions. Thanks.

I think the mjml-browser is not able to render the Montserrat font in mj-text.
You can check this answer in mjml repo mjmlio/mjml#80 (comment)
And add some custom style for mj-text component and have to create component for mj-font component in order to make the custom font to work.

[artf]

Looks like the font option, added years ago, never considered adding those fonts as components inside the mj-head, that means you'll only see them in the HTML export.

I'd suggest for now to rely directly on the mj-font instead of fonts option.