Zenn
FTDテックブログPublicationへの投稿
😊

Nuxt Fontsを試してみた

Satoyan(中川 聡也)
2024/08/18に公開
CSS
Vue.js
font
Nuxt 3
tech

@nuxt/fontsを導入してみた

Nuxt のコミュニティでこちらが公開されていたので試してみました。

https://github.com/nuxt/fonts

TL;DR

  1. @nuxt/fontsを入れるだけ。特別な設定は必要がない
  2. WebFontがまとまるので、woff2ファイルは大きくなる
  3. CDNなどキャッシュは効かせた方が良い

インストール

npx nuxi@latest module add @nuxt/fonts

追加されるもの

  1. devDependenciesに追加される
 "@nuxt/fonts": "^0.0.1",
  1. nuxt.config.js に追加される
  modules: ["@nuxt/fonts"],

追加でこれ入れた方が良い

  1. .gitignoreに .data を追加する
node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env
dist
.idea
# add @nuxt/fonts ここに追加する
.data

どんな仕組み？

https://github.com/nuxt/fonts?tab=readme-ov-file#how-it-works

Nuxt Fontsは、フォントファミリの宣言に遭遇したときに、以下のことを自動的に行います。

  1. CSSで使用されるフォントを解決します。最初に、Roboto.woff2、RobotoBold.ttfなどの名前に一致するフォントファイルをpublic/ディレクトリで検索します。次に、Google、Bunny、FontshareなどのWebフォントプロバイダーに移動します。プロバイダーが見つかったら（この場合、おそらくGoogleフォント）、次のステップに移ります。

  2. @font-faceルールを生成して注入します。ブラウザを適切なソースファイルに向けるルールを生成します。これらは、フォントファミリを使用するCSSと同じ場所に注入されます。

例えば、次のように書いた場合：

:root {
  font-family: Poppins;
}

Nuxtフォントは、CSSファイルの先頭に次のような宣言を追加します：

@font-face {
  font-family: 'Poppins';
  src: local("Poppins"), url("/_fonts/<hash>.woff2") format(woff2);
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131, /* ... */;
  font-weight: 400;
  font-style: normal;
}

他のUnicode range と weight のためのより多くの@font-face宣言が追加されます。

  1. フォントリクエストをプロキシし、キャッシュします。リモートサーバーへの元のソースURLを使用する代わりに、/ _fontsサブパスの下にリライトを生成します。ブラウザでアクセスされると、フォントはリモートサーバーからダウンロードされ、ローカルにキャッシュされます。

  2. フォントのフォールバックメトリクスを作成します。フォントメトリクス（上昇、下降、行の間隔、文字の幅など）にアクセスできる場合、フォールバック@font-face宣言も生成できます。アイデアは、ローカルシステムフォント（ArialやTimes New Romanなど）をWebフォントのサイズにできるだけ近づけてレイアウトのシフトを減らすことです。

:root {
  /* HelveticaとArialのローカルバージョンのフォールバックが生成されます。これらはRobotoのメトリクスに合わせて調整されます。 */
  font-family: Roboto, Helvetica, Arial;
  /* serifやsans-serifなどの一般的なファミリーを提供すると、そのファミリーからシステムフォントが使用されます。 */
  font-family: Merriweather, serif;
}
  1. ビルドにフォントを含めます。プロジェクトをビルドすると、プロジェクトで使用されるすべてのフォントがコピーされ、サイトを読み込む際に外部リクエストを行う必要がありません。（開発中にキャッシュされていないものはビルド時にダウンロードされます。）フォントファイル名はハッシュ化され、Nuxtはそれらを長寿命のキャッシュヘッダーで提供します。

つまり

https://twitter.com/danielcroe/status/1763154659856781314
moduleとして組み込むことで、自動的に、public にフォントが置かれるので CDN　の恩恵に預かれる。Cloudflare　Fonts とかインフラなど使わなくても良い。

ビルドしたらどうなる

nuxt generate をしたところ下記のように生成されて、cache されます。これが使われる。

デプロイ時のログ
07:16:56.550	[info] [@nuxt/fonts] Downloading fonts...
07:16:56.551	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/quantico/v17/rax4HiSdp9cPL3KIF7xuFD96nmDa-T4.woff2
07:16:56.568	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/quantico/v17/rax-HiSdp9cPL3KIF7xrJD1wmULY.woff2
07:16:56.572	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/quantico/v17/rax4HiSdp9cPL3KIF7xuJDs.woff
07:16:56.575	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/quantico/v17/rax-HiSdp9cPL3KIF4xv.woff
07:16:56.579	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.0.woff2
07:16:56.586	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.1.woff2
07:16:56.592	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.2.woff2
07:16:56.597	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.3.woff2
07:16:56.606	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.4.woff2
07:16:56.612	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.5.woff2
07:16:56.618	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.6.woff2
07:16:56.629	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.7.woff2
07:16:56.636	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.8.woff2
07:16:56.644	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.9.woff2
07:16:56.649	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.10.woff2
07:16:56.658	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.11.woff2
07:16:56.663	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.12.woff2
07:16:56.669	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.13.woff2
07:16:56.674	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.14.woff2
07:16:56.677	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.15.woff2
07:16:56.682	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.16.woff2
07:16:56.685	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.17.woff2
07:16:56.689	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.18.woff2
07:16:56.693	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.19.woff2
07:16:56.698	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.20.woff2
07:16:56.701	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.21.woff2
07:16:56.705	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.22.woff2
07:16:56.708	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.23.woff2
07:16:56.712	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.24.woff2
07:16:56.716	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.25.woff2
07:16:56.720	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.26.woff2
07:16:56.724	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.27.woff2
07:16:56.733	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.28.woff2
07:16:56.737	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.29.woff2
07:16:56.741	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.30.woff2
07:16:56.745	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.31.woff2
07:16:56.748	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.32.woff2
07:16:56.751	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.33.woff2
07:16:56.755	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.34.woff2
07:16:56.759	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.35.woff2
07:16:56.764	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.36.woff2
07:16:56.768	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.37.woff2
07:16:56.772	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.38.woff2
07:16:56.776	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.39.woff2
07:16:56.779	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.40.woff2
07:16:56.783	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.41.woff2
07:16:56.787	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.42.woff2
07:16:56.791	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.43.woff2
07:16:56.795	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.44.woff2
07:16:56.799	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.45.woff2
07:16:56.803	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.46.woff2
07:16:56.806	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.47.woff2
07:16:56.810	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.48.woff2
07:16:56.813	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.49.woff2
07:16:56.817	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.50.woff2
07:16:56.821	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.51.woff2
07:16:56.824	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.52.woff2
07:16:56.828	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.53.woff2
07:16:56.831	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.54.woff2
07:16:56.835	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.55.woff2
07:16:56.838	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.56.woff2
07:16:56.842	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.57.woff2
07:16:56.844	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.58.woff2
07:16:56.847	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.59.woff2
07:16:56.851	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.60.woff2
07:16:56.854	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.61.woff2
07:16:56.857	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.62.woff2
07:16:56.861	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.63.woff2
07:16:56.864	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.64.woff2
07:16:56.868	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.65.woff2
07:16:56.871	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.66.woff2
07:16:56.875	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.67.woff2
07:16:56.879	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.68.woff2
07:16:56.883	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.69.woff2
07:16:56.886	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.70.woff2
07:16:56.890	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.71.woff2
07:16:56.893	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.72.woff2
07:16:56.896	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.73.woff2
07:16:56.900	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.74.woff2
07:16:56.904	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.75.woff2
07:16:56.910	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.76.woff2
07:16:56.914	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.77.woff2
07:16:56.917	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.78.woff2
07:16:56.920	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.79.woff2
07:16:56.923	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.80.woff2
07:16:56.926	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.81.woff2
07:16:56.928	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.82.woff2
07:16:56.932	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.83.woff2
07:16:56.934	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.84.woff2
07:16:56.937	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.85.woff2
07:16:56.940	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.86.woff2
07:16:56.944	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.87.woff2
07:16:56.947	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.88.woff2
07:16:56.950	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.89.woff2
07:16:56.953	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.90.woff2
07:16:56.957	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.91.woff2
07:16:56.960	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.92.woff2
07:16:56.962	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.93.woff2
07:16:56.964	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.94.woff2
07:16:56.967	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.95.woff2
07:16:56.969	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.96.woff2
07:16:56.972	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.97.woff2
07:16:56.974	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.98.woff2
07:16:56.977	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.99.woff2
07:16:56.979	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.100.woff2
07:16:56.982	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.101.woff2
07:16:56.984	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.102.woff2
07:16:56.987	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.103.woff2
07:16:56.990	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.104.woff2
07:16:56.992	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.105.woff2
07:16:56.996	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.106.woff2
07:16:56.999	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.107.woff2
07:16:57.006	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.108.woff2
07:16:57.010	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.109.woff2
07:16:57.015	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.110.woff2
07:16:57.018	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.111.woff2
07:16:57.023	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.112.woff2
07:16:57.027	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.113.woff2
07:16:57.032	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.114.woff2
07:16:57.036	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.115.woff2
07:16:57.040	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.116.woff2
07:16:57.044	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.117.woff2
07:16:57.048	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.118.woff2
07:16:57.052	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.119.woff2
07:16:57.060	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFYxQgP-FVth9IU.woff2
07:16:57.065	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFYzggP-FVth9IU.woff2
07:16:57.068	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFYzwgP-FVth9IU.woff2
07:16:57.072	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFYwQgP-FVthw.woff2
07:16:57.078	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEi75g.woff
07:16:57.128	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFJEj75g.woff
07:16:57.160	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFE8j75g.woff
07:16:57.198	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj75g.woff
07:16:57.236	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFCMj75g.woff
07:16:57.275	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFM8k75g.woff
07:16:57.304	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFPYk75g.woff
07:16:57.342	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFJEk75g.woff
07:16:57.376	[log] [@nuxt/fonts]   ├─ https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFLgk75g.woff
07:16:57.413	[success] [@nuxt/fonts] Fonts downloaded and cached.

結果

結果は自社サイトで確認できます(https://www.ftechno-dev.com)

変更前

before

変更後

after

Cloudflare のcf-fontsに比べて

元々、Cloudflare のCloudflare Fonts
https://zenn.dev/kameoncloud/articles/6603d068abb4ff

を使っていたのですが、キャッシュは効くんですが、beforeのようにショートリクエストが多く、
まとめられないかなって思って導入しました。
このサイトではフォントを統一していたので、効果はありますが
Cloudflare Fonts の方が良い場合もあるので、サイトを分析して使い分けるといいかもしれません。

最後に

便利

GitHubで編集を提案
FTDテックブログ
FTDテックブログPublication

Future Techno Developers （主に中川）が発信するテックブログです。 コミュニティ関連する記事なども発信していきます。

Discussion