フォント最適化、subsets: [""] とは

[pss-aileen]

• subsets: 、フォントがサポートする文字セットを指定するための記述 (byGPT) そもそもちょっとNext.jsとの定義とは違うかも
• であれば、latinはおかしくないかnotosans 要調査

[pss-aileen]

https://nextjs.org/docs/pages/api-reference/components/font#subsets

The font subsets defined by an array of string values with the names of each subset you would like to be preloaded. Fonts specified via subsets will have a link preload tag injected into the head when the preload option is true, which is the default.

[pss-aileen]

• 訳
  • フォントの部分集合は定義される
  • 私がプリロードしたいものをそれぞれの部分集合の名前と一緒に文字列の配列として
  • subsets経由で明示されたフォント
  • 明示されたものはヘッドにpreload タグが追加される
  • preloadオプションがtrueの時。これはデフォルト
• 英語
  • subset: 部分集合、ある集合の中に含まれる一部の要素からなる小さな集合のこと
    • 集合 {1, 2, 3, 4, 5} のサブセットには、{1, 2}, {3, 4}, {1, 3, 5} などが含まれます。すべての要素を含む集合自体と空集合（要素を持たない集合）も、その集合のサブセットと見なされます。（byGPT）
  • injected: 注入する

[pss-aileen]

たぶん、予想だけど、日本語はsubsetで指定して、プリロードするのはサポートしてないかもしれない
なので、subsetsにlatinを指定したとしても、それはアルファベットだけがプリロードされる？
それはでも、Interが英字になるので、そもそもsubsetsは指定しなくて良い、preloadもfalseでよい。
違うかもだが...

[pss-aileen]

preloadがsubsetsに対応しているかどうかはエラーで判断できた

Preload is enabled but no subsets were specified for font Noto Sans JP. Please specify subsets or disable preloading if your intended subset can't be preloaded.
Available subsets: cyrillic, latin, latin-ext, vietnamese

「Noto Sans JP」フォントに対してプリロードが有効にされていますが、指定されたサブセットがありません。意図したサブセットをプリロードできない場合は、サブセットを指定するか、プリロードを無効にしてください。
利用可能なサブセット：cyrillic、latin、latin-ext、vietnamese

https://nextjs.org/docs/messages/google-fonts-missing-subsets

このURLの回答のnotosansも、Japaneseのsubsetsがないからそれがなくてプリロードができないならこうやって無効にしてねということかな

Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language and other languages used in Japan. It covers Hiragana, Katakana and Kanji. It also supports Latin, Cyrillic, Greek and Hangul.

これをみるとハングルもあるっぽいから、日本語フォントだけどそういったものも入ってるよと...。で、そこからプリロードできるのはいくつかのものだけ、と。←ここはわからないけど、とりあえずjapanese的なものはないのと、プリロードの必要性がなければsubsetsはなし、preload falseでよさげ。

[pss-aileen]

https://coliss.com/articles/build-websites/operation/work/optimizing-the-display-of-web-fonts.html#google_vignette

[kagomen]

日本語フォントのようにsubsetsが必要ない場合はpreload: falseを追記することでsubsetsプロパティをキャンセルできるようです。
Next13新機能、@next/fontでフォント読み込みを高速化してみた -Zenn

[kagomen]

なぜsubsets: ["latin"]でNotoSansJPが正常に動いてたのかわからない……🤔

[pss-aileen]

一応、Noto Sans JP に latin が入っているようなのと、
subsetsで指定したものはpreloadされる...だけ？といったものみたいなので
設定していても表示はされると言った感じなのかなと考えました。

https://fonts.google.com/noto/specimen/Noto+Sans+JP/about
↑これのサポートしてる文字はまた違う意味のよう...違うかも

[kagomen]

latinだけpreloadされてて、他は通常のローディングが行われてたってことなんですかね……❓

[pss-aileen]

と思うんですが、ちょっとなんともいえないので
ローカルで色々試してみてみます〜
ただ、たぶん今プルリク出されている内容でよさそうな気がしています！

自分が理解できずなので😭

[kagomen]

Preloading
When a font function is called on a page of your site, it is not globally available and preloaded on all routes. Rather, the font is only preloaded on the related routes based on the type of file where it is used:

If it's a unique page, it is preloaded on the unique route for that page.
If it's a layout, it is preloaded on all the routes wrapped by the layout.
If it's the root layout, it is preloaded on all routes.

[pss-aileen]

https://nextjs.org/docs/messages/google-fonts-missing-subsets
わからなくなったので保留

[pss-aileen]

node_modulesの中身を見てみた

node_modules/next/dist/compiled/@next/font/dist/google/index.d.ts

 T extends undefined ? NextFont : NextFontWithVariable;
export declare function Noto_Sans_JP<T extends CssVariable | undefined = undefined>(options?: {
    weight?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'variable' | Array<'100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'>;
    style?: 'normal' | Array<'normal'>;
    display?: Display;
    variable?: T;
    preload?: boolean;
    fallback?: string[];
    adjustFontFallback?: boolean;
    subsets?: Array<'cyrillic' | 'latin' | 'latin-ext' | 'vietnamese'>;
}):

[pss-aileen]

• Noto_Sans_JPにはsubsetが4種類あった...!?

---

このコードは、ウェブフォントとしてNoto Sans JPを使用するための宣言を行うための関数です。各オプションの意味は以下の通りです：

• weight: フォントの太さを指定します。100から900までの値、またはvariable（可変ウェイトのフォントを使用する場合）を指定できます。
• style: フォントスタイルを指定します。通常はnormal（通常のスタイル）が指定されます。
• display: フォントの表示方法を指定します。例えば、swapやfallbackなどがあります。
• variable: 可変フォントを使用する場合に、そのウェイトを制御するためのCSS変数を指定します。
• preload: フォントを事前に読み込むかどうかを指定します。trueの場合、フォントが事前に読み込まれます。
• fallback: フォントが利用できない場合に使用する代替フォントを指定します。
• adjustFontFallback: フォントフォールバックの調整を行うかどうかを指定します。
• subsets: フォントのサブセットを指定します。例えば、latinやcyrillicなどがあります。

subsetsオプションは、フォントの特定の文字セット（サブセット）を指定するために使用されます。例えば、ウェブサイトがラテン文字だけを使用している場合、subsetsオプションでlatinを指定することで、不要な文字セットを読み込まずに済み、ページの読み込み速度を向上させることができます。この場合、指定できるサブセットにはcyrillic（キリル文字）、latin（ラテン文字）、latin-ext（拡張ラテン文字）、vietnamese（ベトナム文字）などがあります。

---

これはlatinだけ指定すれば、他は読み込まないのですか？

はい、その通りです。subsetsオプションでlatinだけを指定した場合、ウェブフォントとしてNoto Sans JPのラテン文字セットのみが読み込まれ、他の文字セット（例えば、キリル文字やベトナム文字など）は読み込まれません。これにより、ページの読み込み速度を向上させることができます。ただし、ウェブサイトで使用するテキストに他の文字セットが含まれている場合は、適切なサブセットを指定することが重要です。

---

らしいけど、なんか違う気が。うーん。

[pss-aileen]

まったく知らない国の言語で、subsetsで指定できる例もあるっぽいので
ただ日本語対応していないだけなのか？

}): T extends undefined ? NextFont : NextFontWithVariable;
export declare function Noto_Sans_Kharoshthi<T extends CssVariable | undefined = undefined>(options: {
    weight: '400' | Array<'400'>;
    style?: 'normal' | Array<'normal'>;
    display?: Display;
    variable?: T;
    preload?: boolean;
    fallback?: string[];
    adjustFontFallback?: boolean;
    subsets?: Array<'kharoshthi' | 'latin' | 'latin-ext'>;
}): T extends undefined ? NextFont : NextFontWithVariable;