Magento 2 : How to Include New Fonts

0
65

Locally stored fonts

Place the font files to your theme directory under: <theme_dir>/web/fonts.

Include locally stored fonts

To include a custom font stored locally, use one of the following approaches:

  • If you build a theme using Magento UI library, declare the font by adding the .lib-font-face mixin in the <theme_dir>/web/css/source/_typography.less file:
    .lib-font-face(
        @family-name:'<any_font_name>',
        @font-path: '@{baseDir}fonts/<path_to_font_file>',
        @font-weight: <font_weight>,
        @font-style: <font_style>
    )
    

Where:

  • {@baseDir} stands for the app/design/frontend/<Vendor>/<theme>/web directory.
  • <path_to_font_file> includes the font file name, but without the extension. For example, @font-path: '@{baseDir}fonts/Luma-Icons' for the font stored in web/fonts/Luma-Icons.woff

The mixin generates the CSS including font. For example, here is how the generated CSS looks for the Open Sans font used in the Blank theme:

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans/light/opensans-300.eot');
    src: url('../fonts/opensans/light/opensans-300.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/light/opensans-300.woff2') format('woff2'), url('../fonts/opensans/light/opensans-300.woff') format('woff'), url('../fonts/opensans/light/opensans-300.ttf') format('truetype'), url('../fonts/opensans/light/opensans-300.svg#Open Sans') format('svg');
    font-weight: 300;
    font-style: normal
}
  • 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.

Ref: devdocs.magento