Magento 2: add custom font to theme

Question

I'm using a custom theme on my Magento 2.3.2. I would like to add a custom font that is on my folder.

Since the official guide that i found on magento's site wasn't working for me, I've tracked down where the font in .body was set.

I've found the file lib/web/css/source/lib/variables/_typography.less

This is the piece of code that decides the font

@font-family__sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Now, I've tried to change those names and I can see changes happening on the site, problem is I can't figure out how to set the path to my custom font. I've tried a few things but nothing worked.

Answer 1

Please Follow the Below steps

Step 1 Please Upload your fonts file woff and woff2 in this

app/design/frontend/Vendor/Theme/web/fonts/fontdirectory

File Path

Step 2 Please include font family in this

app/design/frontend/Vendor/Theme/web/css/source/_typography.less

file Path

For Example

& when (@media-common = true) {
    .lib-font-face(
        @family-name: @font-family__base,
        @font-path: '@{baseDir}fonts/fontdirectory/<<font_name>>',
        @font-weight: 300,
        @font-style: normal,
        @font-display: swap
    );
}

Step 3 Please add the Below code on the same file (_typography.less)

@font-family__base`: '<<font_name>>';

Please execute static content deploy command

Answer 2

There are 2 ways to add fonts.

First is you can use direct google fonts link. Below is the file path to add direct links in the xml file.

app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml

Below is the example.

<link rel="stylesheet" type="text/css" src="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900" src_type="url" />

Below has the second way to add fonts.

1. Please Upload your fonts woff and woff2 in below path.

app/design/frontend/Vendor/Theme/web/fonts/

2. After adding fonts in respected folder you have to include that fonts in css file like below :

app/design/frontend/Vendor/Theme/web/css/style.css

@font-face {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    src: url('../fonts/proxima_nova_semibold-webfont.eot');
    src: url('../fonts/proxima_nova_semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proxima_nova_semibold-webfont.woff2') format('woff2'),
         url('../fonts/proxima_nova_semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Also you can use fonts like below after inlucding in css.

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif';

Let me know still you facing any issue.

Thanks