0

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

1 Answer 1

0

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:

13
  • There is no vendor/hyva-themes/web in my vendor dir. I already have _typography.less file included under source dir and I added this code, it still does not work. I also tried using adobe typekit web fonts link into my header.html file but, that also does not work.
    – LosMos
    Oct 25, 2022 at 11:36
  • I don't have Hyva theme, I've tested the code I give you in the answer with a custom theme based on Magento/luma (it also works for Magento/blank) with the hope it will work with Hyva. Try to create app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_variables.less with the below content:
    – Tu Van
    Oct 25, 2022 at 11:58
  • @font-family-name__base: 'Sofia-pro'; @font-family__base: @font-family-name__base, @font-family__sans-serif;
    – Tu Van
    Oct 25, 2022 at 11:59
  • If it still does not work, could you share a screenshot of the theme structure? So I can help.
    – Tu Van
    Oct 25, 2022 at 11:59
  • That did not work either, U can find my custom theme structure here: link italic bold
    – LosMos
    Oct 25, 2022 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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