KumaTechLab
2024-01-09

【Next.js】ローカルでフォントが適応されない

【Next.js】ローカルでフォントが適応されない

先日page→appの変更対応を行ったのですが、思ったよりもフォント周りに時間をとられたのでそのメモです。

Next.jsでローカル環境の場合のみ下記のようなエラーが表示され、フォントが適応されない場合があります。

  • The user aborted a request.
  • Failed to download M PLUS Rounded 1c from Google Fonts. Using fallback font instead.

※「M PLUS　Rounded 1c」はフォント名です。

環境：　next.js 14.0.3

解決策

調べても根本的な原因があるようではないため、下記の方法を行うと良いみたいです。

  • .nextフォルダを削除
  • npm run dev

ただし、上記でも必ずしも取得できるわけではなさそうです。ちなみに私の場合は解決しませんでした。

私の場合、Next.jsのバージョンを13.x.xから14.x.xに変更して確認したところ、「npm run dev」を繰り返し叩いていると3回に一回くらいに成功するようになりました。

ちなみにvercelにデプロイする際にこのエラーは発生しません。私はCSSファイルにgoogle fontでアクセスした際に表示されるものをすべて張り付けて確認を行いました。

ダメだった方法

試したけど変わらなかった方法です。

pagesルーターの時同様google fontのurlを読み込む

pagesルーターの時は「_document.tsx」の<Head>コンポーネント内で<style dengerouslySetInnerHTML>に下記のように記載することで読み込むことができていました。

export default function Document() {
	return (
		<Html lang="en">
			<Head>
				<link
					rel="dns-prefetch"
					href="//fonts.googleapis.com"
					crossOrigin="anonymous"
				/>
				<style
					dangerouslySetInnerHTML={{
						__html: `</style>
					<link
					rel="preload"
					href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP%3Awght%40300%3B500%3B900&display=swap"
					as="style"
					type="text/css"
					crossorigin="anonymous"
					onload="this.onload=null; this.rel='stylesheet';"
					/>
					<style>`,
					}}
				></style>
			</Head>
	        ...
		</Html>
	)
}

appルーターではルート直下のレイアウト内に配置しましたが、機能しませんでした。

display: swapを使う

フォントのオプションでswapを指定することができるます。この方法でできるようなことが書いてあったので試しましたが、私の場合変わりませんでした。

const poppins = Poppins({
  display: 'swap', // <-これ
  weight: ['300', '400', '500', '700'],
  style: ['normal'],
  subsets: ['latin'],


  adjustFontFallback: false
})

2020 KumaTechLab.