Menu Close
    Searching for an experienced eCommerce & Marketplace Development Company ?

    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!!

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top