# Layout/Font of emails with new GrapeJS editor **URL:** \ **Category:** Product Support\ **Tags:** mautic-4\ **Created:** [March 25, 2022, 7:31am UTC](https://forum.mautic.org/t/layout-font-of-emails-with-new-grapejs-editor/23287 "2022-03-25T07:31:08Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![imog](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/imog/32/3813_2.png) [@imog](https://forum.mautic.org/u/imog)\ **Post date:** [March 25, 2022, 7:31am UTC](https://forum.mautic.org/t/layout-font-of-emails-with-new-grapejs-editor/23287/1 "2022-03-25T07:31:08Z")
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](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/1/1e16c3d8dbe1f438089ef8745155b0968bc60a4f.png) 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](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/b/b5bd5b5a1c889f163afc74a631fa4d53e49d072c.png) 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. ---
**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\ **Post date:** [March 25, 2022, 9:12am UTC](https://forum.mautic.org/t/layout-font-of-emails-with-new-grapejs-editor/23287/2 "2022-03-25T09:12:31Z")
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](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/](https://documentation.mjml.io/) I have a youtube video, that might help: [![](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/c/cf8a05f1b22f0af563919bee26e9b51d61364011.jpeg "Complete Guide To The Mautic MJML Email Builder") ](https://www.youtube.com/watch?v=B6ABMjOY3ZU) Or a super-evil-capitalist option is to take this course: > **[Create Your Own MJML Template Course – Joey Keller](https://joeykeller.com/product/create-your-own-mjml-template-course/)** ---
**Author:** ![imog](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/imog/32/3813_2.png) [@imog](https://forum.mautic.org/u/imog)\ **Post date:** [March 25, 2022, 11:37am UTC](https://forum.mautic.org/t/layout-font-of-emails-with-new-grapejs-editor/23287/3 "2022-03-25T11:37:10Z")
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](https://fonts.googleapis.com/css?family=Open+Sans) and i also can code it into my email-template like ```auto ``` but that does not make it appear in the editors fontlist. ---
**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\ **Post date:** [March 26, 2022, 5:42am UTC](https://forum.mautic.org/t/layout-font-of-emails-with-new-grapejs-editor/23287/4 "2022-03-26T05:42:33Z")
Hi, here is the description: > > > Hi, > > First off, this is what I've been looking for for a long time so thanks f…or your efforts. > > Next, I'd like to add a font in the Typography | Dropdown list. How do I go about adding one? > > Note: I've seen the posts where you suggest adding a new stylesheet but I want it to only apply as per the Typography options. I also saw you added support for \`atRules\` but I don't think this will add an option to the font dropdown and also can't find the documentation on it ... > > Thanks for your time. 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 ---
**Author:** ![imog](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/imog/32/3813_2.png) [@imog](https://forum.mautic.org/u/imog)\ **Post date:** [March 26, 2022, 1:27pm UTC](https://forum.mautic.org/t/layout-font-of-emails-with-new-grapejs-editor/23287/5 "2022-03-26T13:27:45Z")
That is a very important point Joey… and maybe a reason why some renders them as images. ---
**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\ **Post date:** [March 26, 2022, 1:54pm UTC](https://forum.mautic.org/t/layout-font-of-emails-with-new-grapejs-editor/23287/6 "2022-03-26T13:54:33Z")
Yeah. This is not a Mautic issue, its how email works.