How to Add Custom Font in Magento 2 Transactional Email

email-templatesfontsmagento2

I am trying to add custom fonts in magento 2 transactional emails however, it does not work. I am using hyva theme.

I have imported Sofia-pro font under app/design/frontend///web/fonts/SofiaProRegular.woff2 and app/design/frontend///web/fonts/Sofia_pro_regular.ttf

Then I have added _typography.less file under app/design/frontend///web/css/source/_typography.less and added the following code in it

.lib-font-face {
    @family-name: @font-family-name__base;
    @font-path: '@{baseDir}fonts/SofiaProRegular.woff2';
    font-weight: 300;
    font-style: normal;
}

After that, I added the following code inside _variable.less

@font-family-name__base:'Sofia-pro';
@font-family__base: @font-family-name__base, @font-family__sans-serif;

Then tried using in my less file as,

body {
font-family: 'Sofia-pro', Sans-serif';
}

But, none of that seems to work, the font is not applied into my email template.

How do I apply custom fonts in my transactional email templates in magento 2?

My magento 2 version is magento 2.4

Best Answer

You need SofiaProRegular.woff and SofiaProRegular.woff2 for fonts files. Your font path in your code is incorrect, this patch shouldn't use the file extension.

To achieve your goal, take the following step:

  1. Add font files to your local theme directory. For example, app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts.

  2. Create app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less file

.lib-font-face(
    @family-name: 'Sofia-pro',
    @font-path: '@{baseDir}fonts/SofiaProRegular',
    @font-weight: 300,
    @font-style: normal,
    @font-display: swap
);
  1. Create app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_email.less file
.wrapper-inner {
    .main-content, p, th, td {
        font-family: 'Sofia-pro', 'Sans-serif';
    }
}

You're done.

Related document:

Related Topic