Webフォントの読み込みの遅れで表示がカクカクするのを @next/font で解決する

2023-02-04 12:37:48

良い感じのサイトにしたくてタイトルにWebフォントを使ってみたけど、普通に使うだけだとカクカクしてしまった。まあいっかと思ってたけど、友達に指摘されて悔しかったから対応してみた。nextjs 13を使ってるなら、@next/font を使うと対応できる。

カクカクを直したいところのフォントをGoogle Fontにする

@next/font が対応してくれるのはGoogle Fontとダウンロードしたフォントだけだから、Adobe fontを使うのをやめてGoogle Fontにした。

@next/font を導入する

pages/_app.tsx で@next/fontを導入するための実装を追加する。このブログはtailwindを使ってるのでその場合の方法。

// Google Font で読み込みたいフォントを読み込む今回は使いたい Oswald を読み込んでる
import { Oswald } from'@next/font/google'
  
// fontの設定をする。variable にはtailwindで指定するものを書く
const oswald = Oswald({ display:'swap', subsets: ['latin'], variable:'--font-oswald', })
:
:
function MyApp() {
  return (
    <main className={`${oswald.variable}`}>
      <Component {...pageProps} />
    </main>
  )
}

tailwind.config.js にフォントを追加する

theme: {
  extend: {
    fontFamily: {
      'display': ['var(--font-oswald)', ...defaultTheme.fontFamily.serif],
    },
  },
},

設定したフォントを指定する

<h1 className='font-display text-4xl sm:text-6xl my-6 font-black'>{children}</h1>

それでこうなった。目立つとこだけやったけど、他の場所も対応しよう！