Font Changes

Applying your desired font-family in Jumbo is pretty straight forward and can be achieved in following two steps:

Import your desired font-family

In this step, you can import your desired font-family into Jumbo by putting the <link> tag for that inside the index.html as shown below:

Import google font

For this, go to the https://fonts.google.com and select your desired font-family and then select the font styles you want to import. Once you are done with that, you can give you an option about how you want to use the google font on web. Below is a screenshot for that where Roboto font-family has been selected:

Here, you need to select the <link> option and then copy the code given with that option and place that between the <head> start and end tage inside the /public/index.html file.

Import custom font-family

In order to import the custom font-family, you can simply put the <link> tag by setting the href prop to the style file which contains all the @font-face code. Following is an example of the import statement: 

<link rel="stylesheet" href="%PUBLIC_URL%/path-to-font-family-styles/styles.css" />

Once the font-family is imported, you can move to the next step given below.

Use your imported font-family

Following this step, you can actually start applying your font-family in Jumbo.

For this, open the active theme you want to change the font-family in. All of the theme files are located in /src/app/themes/ folder.

By default Jumbo comes up with the default theme, so let's take that as an active theme of your project for example. However, the process of applying font-family is going to remain same for any active theme.

Anyways, considering default as the active theme, you can define typography prop to the theme objects defined in following files:

/src/app/themes/main/default.js

/src/app/themes/header/default.js

/src/app/themes/sidebar/default.js

/src/app/themes/footer/default.js

import {alpha} from "@mui/material";

export const mainTheme = {

    //... other theme related properties
    
    typography: {
    
        fontFamily: 'YourFontFamily, Arial',
        
        //... other typography style in JSS
        
    }
    
    //... other theme related properties
};

Once this is applied, you can reload your page or hot-reloading will just do fine.

That is all you need to do to customize the font-family in Jumbo.

PreviousDark ThemeNextApply RTL as default

Last updated