Editing fonts

The theme’s default fonts can be modified. See online references for suggested font formats and their current browser support.

Edit a theme’s font

1. Place the font files under the theme folder in src\assets\fonts.

2. Open the src\styles\fonts.scss file, and add a font face section with references to the font files:

@font-face {
        font-family: 'Amita';
        src:  url('../assets/fonts/amita-v3-latin_devanagari_latin-ext-regular.woff2') format('woff2'),
              url('../assets/fonts/amita-v3-latin_devanagari_latin-ext-regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

Now it’s possible to use this font in the application, and reference it using the name given in the font-family property. For example, to change the font that is used throughout the application, change the variable of --font-family in the src\styles\variables.scss file as follows:

--font-family: 'Amita';

The font is now changed for the entire application.

You can also create a font face for a specific part of the application and reference it by using the CSS font-family rule with the font name given in the font-face declaration:

font-family: 'Amita';

Check your browser to see the font changes in the homepage and categories page.