yuheijotaki.com

@next/font でローカルフォントを扱う

ページ遷移時にローカルフォントのチラつきが気になったので対策。
結果改善されたようなのでメモ。

コード

@next/font モジュールをインストール

$ npm install @next/font

ローカルフォントを定義。
フォントのデータは pages/fonts/** に配置する。

display: ‘swap’ や preload: true あたりの設定は 公式のドキュメント を参照した。

// _app.tsx

...
import localFont from '@next/font/local'
const PostgroteskBookFont = localFont({
  src: [
    {
      path: './fonts/PostGrotesk-Book.woff',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/PostGrotesk-Book.eot',
      weight: '400',
      style: 'normal',
    }
  ],
  display: 'swap',
  preload: true
})

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <style jsx global>{`
        :root {
          --postgrotesk-book: ${PostgroteskBookFont.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

定義したCSS変数をSCSSで指定する。

  body {
    font-family: var(--postgrotesk-book), ...;
  }

他参考