<h2 id="%E8%BF%BD%E8%A8%98)-v10.2%E3%81%8B%E3%82%89%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%A7google-fonts%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%8C%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB">
<a class="header-anchor-link" href="#%E8%BF%BD%E8%A8%98)-v10.2%E3%81%8B%E3%82%89%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%A7google-fonts%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%8C%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB" aria-hidden="true"></a> 追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように</h2>
Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。
↓ 詳細
<iframe id="zenn-embedded__0b407facced3d" src="https://embed.zenn.studio/card#zenn-embedded__0b407facced3d" data-content="https%3A%2F%2Fnextjs.org%2Fblog%2Fnext-10-2%23automatic-webfont-optimization" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://nextjs.org/blog/next-10-2#automatic-webfont-optimization" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/blog/next-10-2#automatic-webfont-optimization</a>
これより下の解説は古い内容になります。実装の参考にしないようお願いします。
<hr>
以前、Next.jsのリポジトリを眺めていたときに<a href="https://github.com/vercel/next.js/pull/14746" target="_blank" rel="nofollow noopener noreferrer">Font Optimizations</a>というプルリクエストを見つけました。
2020年12月時点ではExperimantalな機能のようですが、<code>v10.0.4</code>で既に使えるようになっていたので試してみました。
:::message alertz 
Next.js v10.0.4でのドキュメントに則っていない記録になります。 
:::
<h1 id="font-optimization%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#font-optimization%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Font Optimizationとは</h1>
まだドキュメントに説明が書かれていないので、プルリクエストの説明文を引用します。
<blockquote>
...略... we will grab the <code>&lt;link rel='stylesheet' href='https://fonts.googleapis.com/...'/&gt;</code>(List of font providers to be extended in future PRs) tags and inline it's content.
</blockquote>
出力されたHTMLの中からWebフォントのスタイルシートを見つけて、その中身をインラインで展開してくれるようです。今のところはGoogle Fontsに対応している模様。
<blockquote>
This eliminates the extra round trip that the browser has to make to fetch the font declarations. This helps in faster paints and improved LCP.
</blockquote>
ものすごくざっくりというと、フォントデータのフェッチ時間を節約できるため表示の高速化が期待できるというわけです。上の文章に書かれている「LCP」は<a href="https://web.dev/lcp/" target="_blank" rel="nofollow noopener noreferrer">Largest Contentful Paint</a>の略ですね。
<h2 id="%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B" aria-hidden="true"></a> どのような仕組みで実現されているか</h2>
以下も<a href="https://github.com/vercel/next.js/pull/14746" target="_blank" rel="nofollow noopener noreferrer">プルリクエスト</a>の引用です。
<blockquote>
<ol>
<li>Gathering the used &lt;link rel='stylesheet' href='<a href="https://fonts.googleapis.com/" target="_blank" rel="nofollow noopener noreferrer">https://fonts.googleapis.com/</a>...'/&gt; tags and downloading their content at build time.</li>
<li>Replacing the inspected Link tag with a style tag and the content of the href inlined within this style tag at serve/render time. 
In order to do the above-said we use.</li>
</ol>
</blockquote>
ビルド時に<code>https://fonts.googleapis.com/...</code>から始まるスタイルシートの読み込みタグを見つけて、その内容をすべてダウンロードするようです。WebフォントをCDNから読み込むより、セルフホストの方がパフォーマンスが良いとされているので、嬉しいですね。
参考
<ul>
<li>
<a href="https://wicki.io/posts/2020-11-goodbye-google-fonts/" target="_blank" rel="nofollow noopener noreferrer">Self-hosting fonts vs Google Fonts 
</a>... セルフホスティングのフォントとGoogle Fontsの読み込みを比較している記事</li>
<li>
<a href="https://developers.google.com/web/updates/2020/10/http-cache-partitioning" target="_blank" rel="nofollow noopener noreferrer">Gaining security and privacy by partitioning the cache 
</a> ... Google Chrome 86〜、プライバシーのためCDNのキャッシュが他ドメインのサイトと共有されることがなくなった</li>
</ul>
と思いきや、実際に試してみて分かったのですが、フォントのデータ（<code>◯◯.woff</code>）自体はFont Optimizationを使ってもGoogleのサーバーから読み込むようです。今後<code>woff</code>もダウンロードしたりするのかな？
Font Optimizationのより詳しい仕組みは<a href="https://github.com/vercel/next.js/pull/14746" target="_blank" rel="nofollow noopener noreferrer">プルリク</a>を読んでいただくのが良いと思います。
<h1 id="%E5%AE%9F%E9%9A%9B%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 実際に試してみる</h1>
<h2 id="head%E3%81%A7google-fonts%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80">
<a class="header-anchor-link" href="#head%E3%81%A7google-fonts%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80" aria-hidden="true"></a> HeadでGoogle Fontsを読み込む</h2>
では実際に試してみたいと思います。コードを見る限り<code>next/head</code>タグ内に配置された<code>&lt;link&gt;</code>が対象になるようです。というわけで<code>_app.tsx</code>でGoogle Fontsを読み込みます。
<div class="code-block-container">
<div class="code-block-filename-container">_app.tsx</div>
<pre class="language-tsx"><code class="language-tsx">import Head from "next/head"

...略
return (
 &lt;Head&gt;
 &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@700&amp;display=swap" /&gt;
 &lt;/Head&gt;
)
</code></pre>
</div><h2 id="next.config.js%E3%81%A7font-optimization%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96">
<a class="header-anchor-link" href="#next.config.js%E3%81%A7font-optimization%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96" aria-hidden="true"></a> next.config.jsでFont Optimizationを有効化</h2>
v10.0.4時点では<code>experimental</code>内で指定する必要があります。
<div class="code-block-container">
<div class="code-block-filename-container">next.config.js</div>
<pre class="language-js"><code class="language-js">module.exports = {
 experimental: {
 optimizeFonts: true,
 },
};
</code></pre>
</div>たったこれだけで準備完了です。
<h2 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%A6%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%A6%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> デプロイして確認</h2>
デプロイしてみると、ちゃんとGoogle Fontsが適用されているようです。ソースを見るとGoogle Fontsの<code>&lt;link&gt;</code>タグが<code>href</code>ではなく<code>data-href</code>になっていることが分かります。
<img src="https://storage.googleapis.com/zenn-user-upload/3rsb5zh3zjkqnboq9fjtsd3m593q" alt loading="lazy" class="md-img">
また<code>data-href</code>の中身（=<code>https://fonts.googleapis.com/...</code>の内容）がstyleタグに展開されています。
<img src="https://storage.googleapis.com/zenn-user-upload/qgndc5zkc696g1nvpt4be864rcnv" alt loading="lazy" class="md-img">
上の画像を見ていただくと分かりますが、フォントのデータ自体は<code>https://fonts.gstatic.com</code>を読みにいっています。これは通常通りにGoogle Fontsを読み込んだときと同じです。
<h1 id="font-optimization%E3%81%AE%E5%8A%B9%E6%9E%9C%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#font-optimization%E3%81%AE%E5%8A%B9%E6%9E%9C%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Font Optimizationの効果は？</h1>
Lighthouseで計測してみました。そんなに変わらんやろと思ってたところ……
<h3 id="font-optimization%E3%81%AA%E3%81%97">
<a class="header-anchor-link" href="#font-optimization%E3%81%AA%E3%81%97" aria-hidden="true"></a> Font Optimizationなし</h3>
<img src="https://storage.googleapis.com/zenn-user-upload/11yicidmnfb6ksj0cytiti63rbm3" alt loading="lazy" class="md-img">
<h4 id="font-optimization%E3%81%82%E3%82%8A">
<a class="header-anchor-link" href="#font-optimization%E3%81%82%E3%82%8A" aria-hidden="true"></a> Font Optimizationあり</h4>
<img src="https://storage.googleapis.com/zenn-user-upload/bv23h6rdqgw8tsw0px6ayr5fsmuo" alt loading="lazy" class="md-img">
えっ………… 
そんな変わる？
「First Contentful Paint」や「Total Blocking Time」が1秒近く短縮されています。ブラウザのキャッシュを無効にして読み込むと、たしかに体感速度的にも少し早くなっているような…？
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
Font Optimizationはかなり有益な機能だと思います。さらに<code>.woff</code>データ自体も設定不要でセルフホスティングできるようになれば最高ですね。 
（VercelにデプロイしたときにBandwidthを消費しまくって、プランをひとつ上げる必要が出てくるかもしれませんが）
ちなみに 
今見ているZennではすでにFont Optimizationが有効になっています。

Next.jsのFont Optimizations（Webフォントの最適化）を試してみる

追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように

Discussion