Magento already provides a set of default fonts but you can manage yourself to include some custom fonts as well.
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
We will guide you how to add locally stored custom fonts into your Magento theme.
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
.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 theapp/design/frontend/<you_vendor_name>/<your_theme_name>/webdirectory<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:
@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
}Congratulations! You’re almost done.
Hope this helps!
Further Reading:
12 Best Free Magento Themes & Templates for Magento 1 & 2
How to Add Custom CSS Files in Magento
