Magento Tutorials

How to Use Custom Fonts in Magento 2

magento-2-custom-fonts

Magento fonts

Magento already provides a set of default fonts but you can manage yourself to include some custom fonts as well. In this post, we will guide you how to add locally stored custom fonts into your Magento theme.

In order to keep your customization stable and ensure that new upgrades will not overwrite your customization, the default Magento theme files should not be modified. Your theme’s stylesheet must be the place for custom fonts.

How to include custom fonts in Magento 2

1. Insert font files to your local theme directory:

app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts

2. In case you might build a theme by the Magento UI library, declare the font by adding the mixin .lib-font-face to the file app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less:

1
2
3
4
5
6
.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} indicates the app/design/frontend/<you_vendor_name>/<your_theme_name>/web directory
  • <path_to_font_file> consists of font file name, but without the extension.

The CSS including the font is generated by the mixin. The following example shows some basic steps how to generate CSS for the Montserrat font in a blank theme:

1
2
3
4
5
6
7
@font-face {
font-family: 'Montserrat';
src: url('../fonts/montserrat/light/montserrat-300.eot');
src: url('../fonts/montserrat/light/montserrat-300.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat/light/montserrat-300.woff2') format('woff2'), url('../fonts/montserrat/light/montserrat-300.woff') format('woff'), url('../fonts/montserrat/light/montserrat-300.ttf') format('truetype'), url('../fonts/montserrat/light/montserrat-300.svg#Montserrat') format('svg');
font-weight: 300;
font-style: normal
}
How to Use Custom Fonts in Magento 2
Rate this post
0 Comments

Dom

A knowledge craver who always strive to be wiser everyday.

    Reply your comment

    Your email address will not be published. Required fields are marked*