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.
-
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– Webninja2021年03月05日 10:08:55 +00:00Commented Mar 5, 2021 at 10:08
2 Answers 2
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
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.
-
Thanks for the help. Unfortunately it's still not showing? Or maybe I'm doing something wrong.user94811– user948112021年03月05日 17:22:35 +00:00Commented Mar 5, 2021 at 17:22
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.