0

I am new to magento2, so I don't understand the less flow in M2, how it is working, and how to use the custom fonts in my theme which is present in the /fonts dir when I import the fonts using @font-face on the .css file it is working fine but when I use the @font-face code (which was used in the .css file), in .module.less it's not working I don't understand why it's not working can you help me to understand How to use the custom fonts using .less.

2 Answers 2

0

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

@font-path: "../fonts/";

@font-face {
    font-family: 'Montserrat';
    src: url('@{font-path}montserrat-regular-webfont.woff2') format('woff2'),
    url('@{font-path}montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

See also Using custom fonts

1
  • Thanks, victor Tihonchuk, not it working fine and I understand how to use the custom fonts in Magento 2. Jun 6 at 12:11
0

You can override default magento file from vendor and place in below file.

if you want to add new font family you can place in app/design/frontend/<your_vendor_name>/<your_theme_name>/web/font/<font_family_name>/<font_family_files>(.ttf/woff)

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

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/latolatin/LatoLatin-Regular',
    @font-weight: 400,
    @font-style: normal,
    @font-display: swap
);

in vendor/magento/theme-frontend-luma/web/css/source/_variables.less, we can mention variables like:- @font-family-name__base: 'Open Sans';

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.