1

I'm attempting to add a Google Web Font (Montserrat: https://fonts.google.com/specimen/Montserrat?preview.text_type=custom) in the Marketing -> Email Templates area and attempted to add this in two ways.

I added the <link .. /> element in the <header> and also tried adding an @import rule in the box that allows you to add styles in the Email Template section of the admin panel.

Am I doing this wrong? The font is not showing on my sales emails. Thank you.

1
  • I would say don't expect Google Web Fonts to work too well on most email clients. At least have a fallback font and expect that to be used on most email clients. But I guess some email clients would show fonts from Google Web Fonts.
    – Webninja
    Mar 5 at 10:08
0

Just to see please can you add the following to the email head template

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
</style>

Then in sales email edit screen add this CSS under template styles

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/templates/template-email.html#customize-email-admin

h1 { font-family: Roboto, Arial, sans-serif; color: #000000; font-size: 36px; line-height: 40px;}

Does Google font come through? If not could be the email client.

1
  • Thanks for the help. Unfortunately it's still not showing? Or maybe I'm doing something wrong.
    – user94811
    Mar 5 at 17:22
0

You need to override header.html which is located to below path.

app/design/frontend/{{YOUR THEME NAME HERE}}/default/Magento_Email/email/header.html

After that add the below code in the tag.

<head>
    @import url(http://fonts.googleapis.com/css?family=Roboto);
</head>

Once you added that then you can use google font like given in the below example.

app/design/frontend/{{YOUR THEME NAME HERE}}/default/web/css/source/_email.less

.wrapper-inner {
    .main-content {
        font-family: Roboto, Arial, sans-serif;
    }
    p {
        font-family: Roboto, Arial, sans-serif;
    }
}

Note: Whenever you change anything into the _email.less file you have to run the commands.

Let me know if you still facing any issues.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy