手順

使用したいfontファイル(woff/otfなど)をpublic/fonts配下に設置
@font-faceを記載したcssファイルも同様にpublic/fonts配下に設置
_document.tsxのheadタグにlinkタグ設置<link rel="stylesheet" href="fonts/fonts.css" />
_app.tsx内でProviderに渡すthemeを作成(styles/theme.tsに作成)
作成したtheme.tsを_app.tsxでimportする

実際のコード

public/fonts/fonts.css

@font-face {
  font-family: 'fontname';
  font-weight: normal;
  font-style: normal;
  src: url('./fontname.woff');
}

src/pages/_document.tsx

import React from 'react'
import NextDocument, { Head } from 'next/document'

return (
// 略
 <Head>
   <link rel="stylesheet" href="fonts/fonts.css" />
 </Head>
// 略
)

src/styles/theme.ts

import { createMuiTheme } from '@material-ui/core'

let theme = createMuiTheme({
  typography: {
    fontSize: 16,
    fontFamily: ['fontname'].join(',')
  }
})
export default theme

src/pages/_app.tsx

import React, { useEffect } from 'react'
import {
  ThemeProvider as MaterialUIThemeProvider,
  StylesProvider
} from '@material-ui/styles'

import theme from '../../styles/theme'

const MyApp = ({ Component, pageProps }: any): JSX.Element => {

  return (
      <StylesProvider>
        <MaterialUIThemeProvider theme={theme}>
          <CssBaseline />
          <div>{pageProps.appData}</div>
          <Component {...pageProps} />
        </MaterialUIThemeProvider>
      </StylesProvider>
  )
}

export default MyApp

Next.js + MaterialUIでfontを指定する

手順

実際のコード