Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts are not added to the markup #284

Closed
zietbukuel opened this issue Apr 4, 2022 · 6 comments
Closed

Fonts are not added to the markup #284

zietbukuel opened this issue Apr 4, 2022 · 6 comments

Comments

@zietbukuel
Copy link

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
Copy link

adiux commented Apr 7, 2022

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

image

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
Copy link
Author

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
Copy link
Author

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
Copy link

kiyah commented Sep 16, 2022

Anything we can do to bump this up?

@lechuhuuha
Copy link

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
Copy link
Member

artf commented Aug 23, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants