Skip to main content

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