Question 167705 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to set Montserrat google font to entire NextJS application that uses MUI components?

I have been trying to use the Montserrat font in my Next js application.
When I inspect the texts in browser, the font family is always roboto and same set of fallbacks.

"Roboto","Helvetica","Arial",sans-serif

I haven’t made this set as my font family in my app. How can i change this font family.

I tried creating a theme and provide the theme to the app.

I am importing montserrat from next/font/google into a file called fonts.js

import { Montserrat } from 'next/font/google';

const montserrat = Montserrat({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display:'swap',
  fallback: ['Arial', 'sans-serif'],
});

export default montserrat;

this is how I am creating a darkTheme.

import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import montserrat from '../../utility/fonts';

const theme = createTheme({
  palette: {
    primary: {
      main: '#202126',
    },
    secondary:{
      main:'#dddddd'
    },
    text:{
      primary:'#dddddd',
    },
    typography:{
      allVariants:{
        fontFamily:montserrat.style.fontFamily
      }
    },
  },
});

const darkTheme = responsiveFontSizes(theme);

export default darkTheme;

I am using this approach as in this material ui next js example

this is my custom app file

import { CacheProvider } from '@emotion/react';
import { ThemeProvider, CssBaseline } from '@mui/material';
import PropTypes from 'prop-types';
import createEmotionCache from '../utility/createEmotionCache';
import darkTheme from '../styles/theme/darkTheme';
import '../styles/globals.css';

const clientSideEmotionCache = createEmotionCache();

const MyApp = (props) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        <main>
          <Component {...pageProps} />
        </main>
      </ThemeProvider>
    </CacheProvider>
  );
};

export default MyApp;

I have these npm packages installed.

    "@emotion/cache": "^11.10.8",
    "@emotion/react": "^11.10.8",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.8",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.3",
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So, the problem was in darkTheme file. I had to move the typography object outside of palette object.

    const theme = createTheme({
  palette: {
    primary: {
      main: '#202126',
    },
    secondary:{
      main:'#dddddd'
    },
    text:{
      primary:'#dddddd',
    },  
  },
  typography:{
    allVariants:{
      fontFamily:montserrat.style.fontFamily
    }
  },
});


  2. 0

    1. first import Montserrat font in global style file

      @import url('https://fonts.googleapis.com/css2? family=Montserrat:ital,wght@0,100;0,200;1,100;1,200&display=swap');

    2. Set body font style in global style file

      body{ font-family: 'Montserrat', sans-serif; }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search