How to add custom font in Magento 2

Magento already provide you a set of built-in fonts, but you can easily include custom font file in your custom theme as well. This guide will describe how to include font in your theme easily.

Please follow the below steps to include the custom fonts:

• Add font file to your theme directory at below location. app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts/
• Declare the Custom font by adding the .lib-font-face mixin in below file. app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less

.lib-font-face(
@family-name:'<custom-font-name>',
@font-path:'@{basedir}fonts/custom_font_filename',
@font-weight:<font_weight>,
@font-style:<font_style>
);

where @{basedir} stands for the app/design/frontend/<you_vendor_name>/<your_theme_name>/web
Note: lib-font-face requires you to have font in all the listed formats which are “eot, woff, woff2, ttf and svg”. If you don’t have font file in any format then it would give you 404 errors.

If you have font file only in one format then also you can easily add the font file by creating mixin only for that font type.

.lib-ttf-font-face(
    @family-name,
    @font-path,
    @font-weight: normal,
    @font-style: normal
) {
    @font-face{
        font-family: @family-name;
        src: url('@{font-path}.ttf') format('truetype');
        font-weight: @font-weight;
        font-style: @font-style;
    }
}

.lib-ttf-font-face(
  @family-name:'<custom-font-name>',
  @font-path: '@{baseDir}fonts/<custom-font-file-name>',
  @font-weight: <font-weight>,
  @font-style: <font-style>
);

We hope it will help you. Thank you!!

If any issue or doubt please feel free to mention in comment section.

We would be happy to help. Happy Coding!!