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.

2 Answers 2


Please Follow the Below steps

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


File Path

Step 2 Please include font family in this


file Path

For Example

& when (@media-common = true) {
        @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

  • I am creating custom theme , shall i use same file?
    – zus
    Commented Dec 27, 2020 at 18:17
  • Yes, @zus. Please try and let me know in case of any issue Commented Dec 28, 2020 at 5:36
  • i just put all my fonts into fonts folder, then what i need to do?
    – zus
    Commented Dec 28, 2020 at 5:42
  • before that can i get help here magento.stackexchange.com/q/328503/57334
    – zus
    Commented Dec 28, 2020 at 5:46
  • 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' Commented Dec 28, 2020 at 5:52

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.


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.


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


@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.


Your Answer

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

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