I want add one locally stored font in my custom theme folder. I followed the instructions here:


But the following code makes my store loads with no styles at all:

    @font-path: '@{baseDir}fonts/myfontname',
    @font-weight: normal,
    @font-style: normal

Why does this code break all styles? And if this code is used to add one custom font, how to add two or more fonts locally stored?

2 Answers 2


If you've followed DevDocs then you'll have _typography.less where you've defined your font by using .lib-font-face mixin. Now to use that font you can override @font-family-name__base variable by either declaring it in _themes.less file or in _variables.less files in your custom theme. so you'll end up with something like

@font-family__base: @font-family-name__base, @font-family__sans-serif;

To add multiple fonts, firstly you'll add fonts by using .lib-font-face mixin inside _typography.less file multiple times as required:

@font-path: '@{baseDir}fonts/path_to_file',
@font-weight: font_weight,
@font-style: font_style
@font-path: '@{baseDir}fonts/path_to_file',
@font-weight: font_weight,
@font-style: font_style


you can use these fonts by introducing new variables where required:

@font-family__base: @font-family-name__base, @font-family__sans-serif;
@font-family__secondary: @font-family-name__secondary-font, @font-family__secondary-fallback-font;

Now @font-family__base and @font-family__secondary variables can be used where required in your css (less).

Note you only need to provide the path where all required font files are located without providing any extension, mixin will load all files for you.

  • How to add 2 or more fonts? Oct 7, 2016 at 23:45
  • I've just edited above to answer your question
    – Devtype
    Oct 8, 2016 at 11:19
  • When I do this, it tries to load the font but the font files don't seem to be put anywhere in pub/static so they 404
    – Scott
    Feb 15, 2019 at 21:12
  • Do I need to import lib-font-face?
    –  coinhndp
    Aug 10, 2020 at 13:03

If your theme does not use the Magento UI library, include the font in your theme .css files by the standard means of CSS, for example the @font-face rule.I've created mytheme.less file in web/css/ path and i than created _font-face.less file and import it in mytheme.less. I placed my font declaration using normal syntax with extension to it. Please change src:url accordingly.


@font-face {
    font-family: 'Gilroy-Regular';
    src:url('../fonts/Gilroy-Regular.eot?#iefix387osh') format('embedded-opentype'),
        url('../fonts/Gilroy-Regular.woff?387osh') format('woff'),
        url('../fonts/Gilroy-Regular.ttf?387osh') format('truetype');
    font-weight: normal;
    font-style: normal;

I've that file as css included in my <theme>/Magento_Theme/layout/default_head_blocks.xml file in head tag. [ see how to include custom css file in magento 2]


<css src="css/mytheme.css" order="100"/>

Than you will be able to your font-faces everywhere in your theme.

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.