Noto Sans JP、Variable fonts、Next.jsでの設定方法

[pss-aileen]

#70

NotoSansJPはバリアブルフォントなのでweightの指定は不要らしい

Next.jsの next/font でWebフォントを使う時は、そのフォントが Variable fonts であれば、 weight を指定しない方がCSSサイズを削減できるようです。
next/fontのweightを指定すると遅くなる!?

自分が理解していないので情報を整理していく

---

さっくりまとめ

• Variable fonts
  • 日本語: 可変フォント
  • 別名: OpenType Font Variations
  • Variable fonts は、植字の初期から存在していた異なるweightとstyleの明確な区別を取り払うもの
    • 以下GPTより
    • 従来のフォントでは、異なる太さ（例えば、Regular、Bold、Lightなど）やスタイル（例えば、Italic、Obliqueなど）ごとに別々のフォントファイルが必要でした。これに対し、可変フォントでは一つのフォントファイル内に複数のスタイルや太さが含まれており、これらを連続的に調整することが可能です。
  • https://fonts.google.com/variablefonts こちらにのっているものは全てそう
  • Next.jsではVariable fontsにはweightを設定しなくて良い、そうでないものは指定が必要 ドキュメント該当部分

[pss-aileen]

Font Optimization

Optimizing: Fonts | Next.js

[pss-aileen]

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#google-fonts

Get started by importing the font you would like to use from next/font/google as a function. We recommend using variable fonts for the best performance and flexibility.

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

• まず、フォントをインポートする、next/font/googleから
• Next.jsはすすめる
• variable fonts の利用を
• これは良いパフォーマスと柔軟性がある

[pss-aileen]

If you can't use a variable font, you will need to specify a weight:

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

• もし、variable font が使えなかったら、weightを設定する必要がある

[pss-aileen]

Variable fontsはこちらのもの
https://fonts.google.com/variablefonts

[pss-aileen]

• Noto Sans JP、Interも含まれる

[pss-aileen]

• axis
  • Variable Fontsの特性を指定するための概念、へー
  • Variable Fontsの日本語は可変フォント、あーしっくりきた

[pss-aileen]

別件だけど、フォントの設定の仕方、こちらもありそう

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#apply-the-font-in-head

• わざわざ global.css に書かなくて良いかも
• また別で調査

[kagomen]

わざわざ global.css に書かなくて良いかも

こちら、先日Next.jsのドキュメント見ながら色々と試してみたのですが、自分が調査した結果としては、現在のようにCSSファイルに記載しないと合成フォントを使用するのは難しそうでした。

試してみたなかで思ったこと

• 英語圏では合成フォント（文中の中で英語はAフォント、日本語はBフォントのような使い方）が必要ない？
• 英語圏の人が複数のフォントを使用する際は、タイトルにはフォントA、記事にはフォントB、のような使い分けしかしないのでは？
• 合成フォントのような設定を可能にするのはバグを生みやすいから、機能として排除されてるのでは……？

参考 https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

[pss-aileen]

• 英語圏では合成フォント（文中の中で英語はAフォント、日本語はBフォントのような使い方）が必要ない？
• 英語圏の人が複数のフォントを使用する際は、タイトルにはフォントA、記事にはフォントB、のような使い分けしかしないのでは？

そうなんですよね、英語圏って別に日本語組み合わせることないので特に何も書いてないんだろうなーと
なので書いていらっしゃるとおり、タイトル、本文でフォントを使い分けるぐらいしかないのかなと。

合成フォントの問題
バグというか、スタイル的に英語と日本語で差違がでるかも〜ということかもしれません。

[pss-aileen]

Variable fonts とは

Introducing variable fonts – Fonts Knowledge - Google Fonts

[pss-aileen]

Variable fonts—officially known as OpenType Font Variations—remove the explicit distinctions between different weights and styles, which have existed since the early days of typesetting. It’s no exaggeration to say that this represents a huge leap forward in font technology in recent years.

[pss-aileen]

• Variable fonts は OpenType Font Variations として知られている
• 異なるweightとstyleの明確な区別を取り払う
• 植字の初期から存在していた異なるweightとstyleの明確な区別を取り払う
• これは誇張して言っているのではない
• 近年のフォント技術の中で
• 大きな変化を示している
• 近年のフォント技術の中で大きな変化といっても過言ではない

---

• 英語
  • Variation: 変動、変化
  • explicit: はっきりとした、明示的な
  • distinction: 区別、差別、特徴
  • typesetting: 植字（活版印刷の過程で活字を原稿通りに並べる作業）
  • exaggeration: 誇張、過大視
  • represent: 代理する、示す、象徴する、意味する
  • leap: はねる、踊る、躍動する、飛ぶようにいく、飛びつく

[pss-aileen]

OpenTypeとは

OpenType – Fonts Knowledge - Google Fonts

[pss-aileen]

OpenType is a font technology and associated font format, developed by Microsoft and Adobe in the 1990s, which allows the end user to access additional features in a font.

[pss-aileen]

• OpenType はフォントの技術で、font formatに関係する
• これはMicrosoftとAdobeによって開発された
• これはエンドユーザーが本当の追加の機能にアクセスすることを許すものだ

---

• associated: 関連づける、連想する

[pss-aileen]

OpenType was recently expanded to allow for variable fonts, whose proper term is OpenType Font Variations.

[pss-aileen]

• OpenTypeは最近拡張した
• Variable fontsのために
• ちゃんとした名前としては OpenType Font Variations

---

• proper: 適切な、ふさわしい

[pss-aileen]

Font format とは

Font format – Fonts Knowledge - Google Fonts

[pss-aileen]

A font format is a specific file type(s) designated to hold font data, with a font itself being the manifestation of a typeface. In other words, for a typeface to be used, it first has to exist as a font.

[pss-aileen]

• font format は特殊なファイルのタイプ
• フォントのデータを保持するように作れらた
• フォントのそれ、typefaceの表現とともに
• 言い換えると、typefaceを使えるようにするためには、まずそれをフォントとして存在させなければいけない

---

• specific: 具体的な、特定の、特殊の
• manifestation: 明示、しるし、表現、兆候