How to override Typography

How to change font

We have used Inter font in our template. Now suppose you want to implement Montserrat fonts.
You can change it by following these steps:

1. Go to the file src/components/theme/mergedTheme.ts and import the Montserrat font and use like this:

   // Next Imports
   import { Montserrat } from "next/font/google";
   
   const montserrat = Montserrat({
     subsets: ["latin"],
     weight: ["300", "400", "500", "600", "700", "800", "900"],
   });

2. Now add the font family to the userTheme object in the same file like this:

   src/components/theme/mergedTheme.ts

   const userTheme = {
       ...
     typography: {
       fontFamily: montserrat.style.fontFamily
     }
   } as Theme;

3. Now follow the common customization steps mentioned in Overview.

Use multiple fonts

src/components/theme/mergedTheme.ts

const userTheme = {
   ...
   typography: {
   // Only h1 will use Montserrat font, while other components will use Inter font,
     h1: {
       fontFamily: montserrat.style.fontFamily,
       fontWeight: 700,
       fontSize: '3.5rem',
       lineHeight: 1.375
     },
   }
} as Theme;

Note

You can refer the typography of the template from src/@core/theme/typography.ts file.

Reference

You can refer to template's typography from here
MUI typography customization: https://mui.com/material-ui/customization/typography