# Monowidth font in GrapesJS code viewer and editor

**URL:** <https://forum.mautic.org/t/monowidth-font-in-grapesjs-code-viewer-and-editor/31206>\
**Category:** Ideas and Feature Requests\
**Created:** [March 9, 2024, 8:54pm UTC](https://forum.mautic.org/t/monowidth-font-in-grapesjs-code-viewer-and-editor/31206 "2024-03-09T20:54:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 9, 2024, 8:54pm UTC](https://forum.mautic.org/t/monowidth-font-in-grapesjs-code-viewer-and-editor/31206/1 "2024-03-09T20:54:11Z")

</div>

My idea is  
Replace Arial with a font suited for displaying code.

For example: [Roboto Mono - Google Fonts](https://fonts.google.com/specimen/Roboto+Mono)

I think these groups of people would benefit from this idea:  
Those who send emails and building landing pages.

Why I think they would benefit from this idea:  
Easier to edit email and page code.

Any code or resources to support this idea:

Are you willing to work on this idea?:  
Sure

What skills and resources do you need to explore this further?

---

<div class="post-metadata">

**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 11, 2024, 7:50am UTC](https://forum.mautic.org/t/monowidth-font-in-grapesjs-code-viewer-and-editor/31206/2 "2024-03-11T07:50:10Z")

</div>

Hi,  
You can add google fonts by using

[https://documentation.mjml.io/#mj-font](https://documentation.mjml.io/#mj-font)

Example:

```auto
 <mjml>
   <mj-head>
     <mj-font name="Roboto"
       href="https://fonts.googleapis.com/css?family=Roboto" />
   </mj-head>
   <mj-body>
     <mj-section>
       <mj-column>
         <mj-text font-family="Roboto, Arial">
           Hello World!
         </mj-text>
       </mj-column>
      </mj-section>
   </mj-body>
 </mjml>

```

However, plz be aware, that your font won’t be visible for most of your readers:

> **[Can I Add Google Fonts to My Email Designs? - Email On Acid](https://www.emailonacid.com/blog/article/email-development/web-fonts-google-fonts/)**
>
> Jazz up your email campaign with web fonts. Learn three methods to embed web fonts and best practices for using custom fonts in your HTML templates.

**Visibility of non safe fonts in emails:**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/2/23e7f9e05ccd55b5e9f8bfc51f11834c07f8d15b.png)

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 11, 2024, 8:21am UTC](https://forum.mautic.org/t/monowidth-font-in-grapesjs-code-viewer-and-editor/31206/3 "2024-03-11T08:21:04Z")

</div>

Thank you.

But it’s not the email font I want to change. It’s the font used in the code editor:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/4/4016b41be0150c7a403eaf42fe51170ea58e10e2.png)