Magento 2.3 custom font not loaded in email

Question

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;
}

Answer 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