Replacing Google Fonts in Mautic

[adela_p]

Hello I need some help with replacing Google fonts in Mautic with Ubuntu fonts, if this is possible.
My Mautic version is v4.0.1.
Kind Regards.

[joeyk]

Hello, can you be plz more specific?
In Landing pages or emails?

[adela_p]

Hi, thank you for replying.
Both of them if possible.

[joeyk]

Different approach for both.

1. For emails some google fonts are not visible once you use them, because the email readers like Gmail and Outlook certain versions won’t allow it.

How to use custom fonts in your email template

You can use custom fonts (like Google Fonts) in your templates. Do do this, you have to first add them to the header of your email.

The header of an MJML email starts with the tag and ends with the tag. If these tags do not exist in your template yet, just add them after the opening tag and before the opening tag.

Inside the head tag, you can then provide a custom font.

Example:

<mjml>
  <mj-head>
    **<mj-font name="Comforter" href="https://fonts.googleapis.com/css2?family=Comforter"/>**
 
  </mj-head>

	<mj-body>
	
	Here you'll find the visible content of an email.

	</mj-body>
</mjml>

Custom fonts can then be chosen in the mj-text blocks:

<mj-text align="center" color="#fff" **font-family="Comforter, sans-serif"** font-size="12px">
		  This is some text rendered in a fancy Google Font
</mj-text>

⚠️ Please note that custom fonts are only supported in some email clients like Apple Mail. Gmail, most versions of Outlook and many other email clients do **not** support custom fonts. This is not a limitation of Mautic but of the email clients. You can see here [which email clients do support custom fonts](https://www.caniemail.com/search/?s=web+font).

The “safe” fonts that are supported by most email clients are:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

When you are using a custom font, please make sure that you always provide one of the safe fonts als fallback font. For example, don’t use this:

<mj-text **font-family="SomeFancyGoogleFont"**>
		  Some text
</mj-text>

Instead, provide one or more fallback fonts for all the email clients that don’t support custom fonts:

<mj-text **font-family="SomeFancyGoogleFont, Times New Roman, serif"**>
		  Some text
</mj-text>

[joeyk]

2. Regarding Pages, you have to follow the following steps:
   Open the code view of your page and add it to the head section:

In Body:

Result: