How to Change Material UI Font Family with Different Font Family and Font Size on A Next.js Project

Tutorial
Front End
Blog
Studiofru
Studiofru
Cover Image for How to Change Material UI Font Family with Different Font Family and Font Size on A Next.js Project

Material UI is an open-source framework that implements Google’s Material Design which provides ready-to-use front-end components for React projects. The library is free with many of the component designs that are simple and customizable. The implementation is very easy with theme property that can be customized through some methods.

While the documentation did mention that the font family can be changed with the theme.typography.fontFamily property, it is quite tricky to customize the font size based on the font family differences on a project. 

Here is the example using the system font that was written on the documentation: 

 const theme = createTheme({
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

 

What if We Want to Use Google Fonts with Different Font Family and Size Implemented in The Project?

If we want to use Google Fonts we need to embed the font family first to the document.js file and write down the font name on the theme property inside the app.js file. 

Here is the sample code written on /document.js  

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
            <link href="https://fonts.googleapis.com/css2 family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,700;1,6..12,400;1,6..12,500;1,6..12,700&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet" />   
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

And here is the sample code written on /_app.js

import React, { useEffect } from 'react'

import useMediaQuery from '@mui/material/useMediaQuery';
import { ThemeProvider, createTheme, responsiveFontSizes } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

function MyApp({ Component, pageProps }) {
  const colorMode = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode: 'dark',
  },             
        typography: {
          h1: {
            fontFamily: "Silkscreen",
            fontWeight: 500,
          },
          h2: {
            fontFamily: "IBM Plex Sans",
            fontWeight: 700,
          },
          h3: {
            fontFamily: "IBM Plex Sans",
            fontWeight: 700,
          },
          h4: {
            fontFamily: "IBM Plex Sans",
            fontWeight: 700,
          },
          h5: {
            fontFamily: "IBM Plex Sans",
            fontWeight: 700,
          },
          h6: {
            fontFamily: "IBM Plex Sans",
            fontWeight: 700,
          },                    
          button: {
            fontFamily: "Silkscreen",
            fontWeight: 700,
          },
          body1: {
            fontFamily: "Nunito Sans",
          }
        }
      }),
  );

const theme = responsiveFontSizes(colorMode);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

This site is the result of the above code with dark mode theme. 

External Link
Click here

Share this article