Close [x]

Using custom fonts

Edit this page on GitHub

What's in this topic

The Magento application contains a set of built-in fonts, but you can easily include custom fonts. This topic describes how to include a locally stored custom font in your Magento theme.

Font files location

Locally stored fonts

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

External fonts

To use external fonts, include them in the page configuration file, as described in Include static resources (JavaScript, CSS, fonts).

Include fonts

To ensure stability and secure your customizations from being deleted during upgrade, we recommend not changing default Magento files. That is why custom fonts should be included in the stylesheets of custom themes.

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 .font-face mixin in the <theme_dir>/web/css/source/_typography.less file: 
    .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.