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

• zus: I am creating custom theme , shall i use same file?
• Saneer Ladani: Yes, @zus. Please try and let me know in case of any issue
• zus: i just put all my fonts into fonts folder, then what i need to do?
• zus: before that can i get help here magento.stackexchange.com/q/328503/57334
• Saneer Ladani: Now you can follow steps 2 and 3. In Step 2 you can include the font path. if you have uploaded or put the font on direct font directory then set this @{baseDir}fonts/<<font_name>> font path in Step 2 and last you can add this @font-family__base`: '<<font_name>>'; line in same file. please sent font file name instead of this <<font_name>>. For example the uploaded file name is opensens.woff then path is like this @font-path: '@{baseDir}fonts/opensens'

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