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

Question

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",

Did you try this https://stackoverflow.com/questions/48319372/changing-font-family-of-all-mui-components? — anonkey, May 12 '23 at 18:07
i tried some. they didn't work in next js. i will try again tomorrow. thank you for the link — Ram Kumar, May 12 '23 at 19:17

score 0 · Answer 1 · answered May 13 '23 at 03:52

0

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');
Set body font style in global style file

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

answered May 13 '23 at 03:52

Bawantha Rathnayaka

85
7

Thank you for your time. I had to move the typography part in theme file outside `palette` object. the theme worked. – Ram Kumar May 13 '23 at 04:43

score 0 · Answer 2 · answered May 13 '23 at 04:44

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
    }
  },
});

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

2 Answers2