つなぐラボPublicationへの投稿
🦔

font-familyのモダナイズ, 2025AW

和田つなぐ
に公開
CSS
font
webは最高のデザインツールである
fontfamily
tech

2025年4月～Noto Sans JPがWindows11標準搭載となったものの、変わらずMac/iOSが標準搭載ではない為（iOS26／2025年9月時点）、これまで通りGoogleFonts利用環境のままで良いのではありますが、Windows向けだけにでもWebフォントリソース読み込み不要とし、ページ読み込みスピードをアップしてユーザー体感の向上を果たしたい！

Noto Sans JPのシステムフォント利用も踏まえて、font-family設定標準を見直しました✨

font-family | 2025 - 基本セット


// 基本型-2025AW
$stdFonts: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

// 【明朝】１ウェイト（標準＝＞Mediumが適度）のみならば
$serifFonts: "YuMincho Medium","Yu Mincho Medium","Noto Serif JP","Hiragino Mincho ProN",serif;
font-weight: 500;

// 【明朝】ウェイト使い分けるなら
$serifFonts: YuMincho,"Yu Mincho","Noto Serif JP","Hiragino Mincho ProN",serif;
font-weight: 500;	// 400, 500, 700

Noto Sans JP

ちなみにWindows標準搭載のNoto Sans JPを細かくチェックすると、GoogleFonts版と差異ありウェイトが２段階少なかったりします、
→　600, 800は使わないようデザイン段階から気をつける!

游ゴシック体

・macOSでは追加ダウンロード扱い（初期状態で入っていない）
・iOS/iPadOS、Androidには入っていない

明朝体について

基本Noto Sans JP（ゴシック体）が多く、明朝体を使う場面は少ないですがこの機会にと思い整理してみました。

Noto Serif JP

最新OSでの搭載状況：

OS 搭載状況
Windows 11 ◯ 標準搭載あり
macOS（Tahoe 26） ✕ 非搭載

Mac向けにはヒラギノ明朝が良いのですが、Winとフェイス揃える意味では標準搭載フォントで無難な状態としておきたい。そこで游明朝を考える。

游明朝体

Mac：YuMincho
Win："Yu Mincho"

細すぎるので太めにするのが良きというのが主流で、
"YuMincho Medium","Yu Mincho Medium"
を指定しておくのが無難ではあるもののこの機会にちょっと細かく整理しました。

WindowsとMacにおける游明朝体のfont-weight指定とウェイト対応表：

font-weight指定 Windowsのウェイト表示 Macのウェイト表示
400（←normal） Regular（細め、やや細い） Medium（中間の太さ）
500 Medium（中間、適度な太さ） Medium（中間の太さ）
700（←bold） Demibold（太め） Demibold（太い）

10.12 Sierra以降
Extrabold（さらに太い）
  • weight: 400だと、Winで細くなってしまう
  • Mac最新ではBold指定に気を使う
  • 10.12 Sierra以降の環境でDemibold指定する場合はfamily指定すればよし
    => "YuMincho Demibold"

ファミリーMedium指定で、weight指定が紛れ込んできても影響ないようにしておく、
というのが結論として最も安全で、ここに着地することが理解できます!

ヒラギノ明朝

"Hiragino Mincho ProN"のフォールバックに"Hiragino Mincho Pro"を残してましたが搭載機は～OS X El Capitan（10.11、2015年）までと確認し削除//

※ちなみにProN：「N」は2004年に改訂されたJIS字形（JIS2004字形）に準拠した字形

Noto Sans JPの最適環境へ!

ローカルフォントを優先させる

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Montserrat:wght@100;900&display=swap" rel="stylesheet"> -->
<!--    CSS側@importにて処理 -->

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

@font-face {
	font-family: "localNotoSansJP";
	src: local("Noto Sans JP"), local("Noto Sans CJK JP"), local("Noto Sans Japanese");
}

$stdFonts: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

$stdFonts: "localNotoSansJP", $stdFonts;

body {
	font-family: "---keyFont for PJ---'", $stdFonts;
	font-weight: normal;
	font-feature-settings: "palt" on;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
  • "Noto Sans CJK JP" : Android、およびAdobe Fontsでセットしてる場合
  • "Noto Sans Japanese" : 早期アクセス・/earlyaccess/版をセットしてる場合
    もカバーして周到に!

ローカルフォントが適用されててもフォントデータ転送されるのでは?!と疑問が湧きましたが調べた結果、検証した結果、心配無用でした!

処理の順番
HTMLパース
  ↓
CSS読み込み（数KB）
  ↓
@font-face認識
  ↓
レンダリング準備
  ↓
該当のfont-familyを使用する要素を発見
  ↓
フォントファイルダウンロード（数百KB）開始

いち早くページの表示を整えるために、GoogleFontsの@import（またはhtml側で<link> ）をなるべく先頭に記述して早めにダウンロードさせる、ということをやりますが、
実はこの時点ではCSSの読み込みまでで、フォントデータ（woff2）をダウンロードし始めるトリガーはレンダリングを開始して該当のDOM要素を発見したタイミング、という動きになっているのですね!
ローカルフォントの存在を先に判定しているのでフォントデータのダウンロードは発生しない、ということです!!

検証の結果、無駄な読み込みが発生していないことが確認できました♥️

最適なウェイト指定

必要なウェイトに応じて最適な形で読み込むようにするべく、ウェイト指定ごとにcheckしてみました：

GoogleFonts（Noto Sans JP）リソースの転送サイズを比較
  1. Variable Font版（wght@100..900）: 377KB
  2. Weight指定版（wght@400;500;700）: 402KB
  3. Weight限定版（wght@400）: 207KB
  4. Weight指定版（wght@400;700）: 402KB　？？
  5. Weight指定版（wght@100;200;300;400;500;600;700;800;900）: 402KB　//

１ウェイトなら軽い、
３ウェイトだとVARの方が軽い、
２ウェイトならVARより軽くなりそうだが、→　そうでもなく、
２ウェイト以上は同じなのか？　→　YES

GoogleFontsの設定を確認すると、１ウェイトとバリアブルの２パターンしかコードを案内していないので、２ウェイト以上のWeight指定コードをリクエストしても意味がなく、「バリアブル版＋αの余計な情報が混じった状態で配信される」のではないかと推察。

  • ✅ 1ウェイトのみ使う → 軽い（207KB）
  • ✅ 3ウェイト以上使う → Variable Font版が正解（377KB）
  • ❌ 2ウェイト指定 → ナンセンス（402KB = VF + 余計なデータ）
ウェイト指定まとめ：
  1. Variable Font（wght@100..900）: 377KB　◎ほぼほぼのケースはこちらでOK
  2. １ウェイト限定（wght@400）: 207KB　← 単一ウェイトならこちらで!

２ウェイト以上（wght@400;500;700 等）: 402KB ← 最重量　※これはナシ

つなぐラボ
つなぐラボPublication

Discussion