0

We want to use the 'Open Sans' font of Google in our transactional email templates.

But when we sent the email it does not load the custom font inside the email. We changed the file /app/code/design/frontend/theme/theme/web/css/email-fonts.css to the code below.

I also saw that The Magento Blank theme uses the Open Sans font. But for some strange reason, it is not added by default. I also can not find the font files that should be loaded in this file; https://github.com/magento/magento2/blob/2.3/app/design/frontend/Magento/blank/web/css/source/_typography.less There is not opensans font folder.

But still it is not loaded inside the email. What are we missing?

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
1

Above Magento, email does still not support the use of web font, you can have an more specific explanation on

https://litmus.com/blog/the-ultimate-guide-to-web-fonts While web fonts don’t have universal support, here are the email clients where they are supported:

  • Apple Mail
  • iOS Mail
  • Google Android
  • Samsung Mail (Android 8.0)
  • Outlook for Mac
  • Outlook App

and

https://www.campaignmonitor.com/blog/email-marketing/2019/02/10-things-need-know-web-fonts-email-right-now/ The three most popular desktop email clients have the following defaults:

  • Apple Mail = Helvetica
  • Gmail = Arial
  • Microsoft Outlook = Calibri

In magento you must edit the:

Magento_Email/email/header.html in your theme.

If you are using Luma theme, and you are extending it, use the:

/vendor/magento/theme-frontend-blank/web/css/source/_email-base.less to /app/design/{vendor}/{theme}/web/css/source/_email-base.less

Source from Magento 2: I just need to add custom font in email template

3
  • Thanks for the reply! :) We are using the Luma theme and already extend the _email-base.less file. Do we need to add the @font-face inside this .less file to load the font inside the mail template? – JGeer Mar 19 '20 at 20:18
  • Check directly the source code of the sent email, @import directive or <link> tag must be in, if not edit the header. And be sure that your mail client support external font. You can still made a simple test without using magento first with a mail php function. – Kennedy Mar 20 '20 at 8:19
  • Hi @JGeer, is it ok? don't hesitate to vote ;) – Kennedy Mar 22 '20 at 15:23

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.