Nextjs ✖️ Google Fonts
フォントの最適化 🖊️
自動的に最適化し、外部ネットワーク リクエストを削除してプライバシーとパフォーマンスを向上させます。
Nextjsではフォントを自動的に最適化してくれるnext/fontという機能（仕組み）が存在する。
next/fontを利用することで、パフォーマンスとプライバシーに配慮しながら、Google Fontsを利用できる。
具体的には、CSSとフォントファイルはビルド時にダウンロードされ、他の静的アセットと共にセルフホストされる。（ブラウザからGoogleにリクエストが送信されることはない）
next/fontの組み込み方法
まずはnextjsへの組み込み方法について。
layout.tsxまたはfont.tsなどで使用したいフォントを関数化する。これだけ。
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin']
display: 'swap'
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={inter.className}>
<body>{chidlren}</body>
</html>
)
}
Nextjsでは、可変フォントを推奨。
可変フォントを使用できない場合は、太さをちゃんと指定する必要あり。
太さ（やスタイル）は配列にして複数指定できる。
const roboto = Roboto({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
display: 'swap',
})
ちなみに、可変フォントとは❓
可変フォントとは別名、「バリアブルフォント」とも呼ぶ。
通常のフォントは、文字が太いのと細いのを使いたいとしたら、それぞれ別々のフォントファイルが必要になる。
しかし、可変フォントは全種類の文字が1ファイルにまとまってる。
したがって、細い文字から太い文字まで好きなように調整できる。
フォントファイル = 1ファイルで済む ということはフォントデータの容量削減になる。
日本語フォントは、ひらがなに加えて漢字・カタカナも含むからそもそもの容量が大きい。
そのため通常フォント（=複数ファイル）よりも可変フォント（=1ファイル）の方が良いってことか。
Google Fontsの可変フォント一覧↓
サブセットの指定
Google Fontsは自動的にサブセット化される。
サブセットとは、「フォントファイルに含まれている文字のうち実際に使う文字だけを取り出して、小さくしたファイルを作ること」です。
これを行うことで、フォントファイルのサイズが小さくなって、Webページがより速く読み込まれる。
その他
設定項目の詳細に関しては、APIリファレンスを確認すると良い。
追記：重要そうな項目に関してはコメントにまとめてみました。
まとめ
フォントってWebページ全体でどのページでも必ず必要になってくるもの。
これをちゃんと最適化してあげることで、直接的にUX向上につながってくるということを理解できました。
Discussion
next/font設定項目について
重要そうな項目をメモ↓
trueにするとフォントが重要ですぐに表示されるべき場合に最初にロードするようにします。
デメリットとしては、他の重要なリソースのロードを妨げる可能性あり。（リソースの競合が主なデメリットといった感じ？）