Reading list Switch to dark mode

    How to add custom font in Magento 2

    Updated 24 August 2021

    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:

    Start your headless eCommerce
    now.
    Find out More
    • 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!!

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home