Menu
I'm trying to add different fonts to my theme.js while using Material-UI in Next.js. It's been surprisingly difficult to figure out how.
I've tried using fontfaceobserver as suggested here(https://github.com/zeit/next.js/issues/512), but can't get the theme to update. Here's my theme.js file:
const theme = createMuiTheme({
typography: {
fontFamily: [
'Raleway','Roboto Condensed',
].join(','),
fontWeight: 700,
h1:{
fontFamily: 'Raleway',
fontWeight: 700,
}
},
});
The font for my h1 doesn't change :(
927
For whoever comes this way, the answer was actually in the Material-ui and Next.js example project I was using:
https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
You can see how google fonts get imported above.
118
If you want to add a self-hosted font to your next.js project
Copy your-font.ttf into public/fonts folder
Create a new css file e.g your-font.css (in public/fonts/) and add this code to it :
@font-face {
font-family: 'your-font';
font-weight: normal;
font-style: normal;
src: url('./your-font.ttf');
}
Go to page/_document.js and add this line inside <Head> tag
<link rel="stylesheet" href="/fonts/your-font.css" />
Create a theme.js file for material ui and add your font to Typography :
import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme(
{
typography: {
fontFamily: [
'your-font',
'Arial',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
},
},
);
export default theme;
Go to pages/_app.js and add your theme e.g :
import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../common/theme';//location of theme file created in previous step
export default function MyApp(props) {
const { Component, pageProps } = props;
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
return (
<React.Fragment>
<Head>
<title>My page</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}> {/*<---- Add this */}
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</React.Fragment>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.object.isRequired,
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
