How to add custom font in magento2 transactional email?

Question

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

Answer 1

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

3. 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:

• Use custom fonts in email template in Magento 2: https://developer.adobe.com/commerce/frontend-core/guide/templates/email/#custom-fonts
• Add a new custom font in magento 2: https://developer.adobe.com/commerce/frontend-core/guide/css/fonts/