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",
2
Answers
So, the problem was in darkTheme file. I had to move the
typography
object outside ofpalette
object.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; }