Layout/Font of emails with new GrapeJS editor

Product Support
1

Hello! I’ve recently upgraded my Mautic to 4.2.0 and start using the GrapeJS editor. So far that works but i encountered that emails look different than before.

One thing is that element blocks all have an top/bottom margin (even if set to 0px in the editor) especially text-elements look too much distributed over the page. I don’t know how to get rid of those extra space?

image
image903×450 29.4 KB

The second thing is that i want to use my favorite font “Open Sans” but i can’t find it in the editors fontlist:

image

And another question puzzles me: is there a way to convert my legacy editor templates into true MJML GrapeJS templates? I guess just editing them with the new editor might not do that job, or?
If i open such a email-template in the new editor i can’t edit most of the textfields, they seem “hidden” behind “box” elements or will not be editable.

2

Hi,

1. Extra space:
once you built your email, check a test email how exctually works. Maybe the space is gone.

2. Open sans
If it’s not in the list, you can’t just use it in the GUI builder. You can code it in there, check the docs:
https://documentation.mjml.io/#mj-font

3. Converting pages.
You need to build it yourself, or have someone do it for you. It’s not that hard btw.
You can check the docs:
https://documentation.mjml.io/
I have a youtube video, that might help:

Or a super-evil-capitalist option is to take this course:

3

I don’t understand how to extend the fontlist. I know the Google-URL of the family:
https://fonts.googleapis.com/css?family=Open+Sans
and i also can code it into my email-template like

<mj-head>
	<mj-font name="Open Sans" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
</mj-head>

but that does not make it appear in the editors fontlist.

4

Hi, here is the description:

But please note, just because you add it, it will only show in an email if the recipient has that font in the email reader she/he is using. For example gmail refuses to show google fonts (which is weird).

Joey

5

That is a very important point Joey… and maybe a reason why some renders them as images.

6

Yeah. This is not a Mautic issue, its how email works.