Magento 2 - Using Google Fonts in Email Templates

Some email clients support the usage of web fonts, including Google Fonts. An example of such an email client is Mozilla Thunderbird.

While most email clients still do not support web fonts (including Gmail, Yahoo, or Outlook), you may want to utilize those for users that have alternative clients such as the aforementioned Thunderbird, so let's explore how that can be done.

Note; To use Google Fonts in Magento Email Templates, you'll need to install our Enhanced Email Template Editor extension. If you're using the Pearl Theme Professional Pack, this extension is included.

Enabling the Google Fonts functionality in the Email Template Editor settings

Step 1

Log in to your Magento Admin dashboard and head into Admin -> WeltPixel -> Email Template Editor -> Email Template Editor Settings.

Step 2

Expand the text type you want to enable Google Fonts for. You can enable Google Fonts for H1, H2, H3 , and Paragraph text types. Afterward, set the Use Google Fonts option to Yes and select the font family you'd like to use under the Google Font Family option.

Step 3

Save the configuration and flush the Magento Cache in the Cache Management section. This should ensure the Google Font is now applied and is displayed in email clients that support web fonts.

Testing to ensure the Google Font is applied

Step 1

To perform a test, you'll need a compatible email client such as Mozilla Thunderbird. After applying your Google Font, head into Admin -> Marketing -> Communications -> Email Templates and edit one of your existing Email Templates.

Out Email Template Editor extension comes with a neat feature that allows you to send a test email, so enter your email address in the box and click Save and Send Test Email. A prompt will show notifying you that the test email was sent.

Step 2

Open up Thunderbird (or another web font compatible client) and load the email, which should show up in your Inbox. Make sure that external content is allowed, and you should see the Google Font you selected applied to the text type you enabled it for.

The example below shows what an Order Received email would look like in Thunderbird with the Akronim Google Font applied to the H1 and Paragraph texts.

As you can see, it's quite simple to apply a Google Font with our extension, however, the key takeaway here is that most email clients still do not support web fonts, which, in turn, means that you can expect it not to render on those clients.