How to use the custom fonts in M2 using LESS

Question

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.

Answer 1

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

Answer 2

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