今さら理解するウェブフォントver.2026

Transcript

1. 今さら理解する ウェブフォント ver.2026 takanorip / 大木尊紀 2026.10.12
2. takanorip 株式会社カンム デザインマネージャー フロントエンドエンジニアからUIデザイナー、 デザインエンジニアを経て2025年7月から
 デザインマネージャーをしている。
3. 株式会社カンム お金の新しい選択肢をつくる 私たちはソフトウェアを通してお 金の新しい選択肢をつくり、日々 の生活や事業、商流の中に金融を 溶け込ませ、誰もが自然な形で金 融にアクセスできる社会を目指し ます。
4. イントロダクション ウェブフォントを使う意義 ウェブフォントの基礎知識 ウェブフォントを快適に使う まとめ 目次 01 02 03 04 05
5. イントロ ダクション 今さら理解する ウェブフォントver.2026
6. 過去の発信
7. 今日話すこと あれから何が変わった？ 今のスタンダード ウェブフォントの未来
8. ウェブフォントは楽しい！
9. ウェブ フォントを 使う意義 今さら理解する ウェブフォントver.2026
10. メディアにおけるフォントの歴史 写本 →活版印刷→写植 →DTP 手書き→金属活字→文字盤→データ フォントの歴史は印刷の歴史でもある。 活版印刷の頃からデザインに応じてフォントを変更することが可能になり、 現在に至るまで数十万種類以上のフォントが生み出されてきた。
11. フォントを 自由に変更できることは 技術の進歩と フォント制作者の努力の結晶
12. フォントにこだわらないと もったいない！
13. なぜ人々はフォントを変えるのか 情報伝達において 非言語的コミュニケーションが 非常に重要だから 人間は文章だけでなくフォントの影響も受けながら情報を受け取っている。 内容にそぐわないフォントを使うと伝達効率も下がる。 フォントの選定はデザインの根幹である。
14. フォントが人々に与える影響 ブランドの印象 同じ名前でもロゴフォントによって評価が変わる。 感情・雰囲気 親しみや緊張感など、「声色」に近いものを感じる。 読む速さ・負担 フォントによって文章を読む速さが変わる。 行動への意欲 読みにくいフォントで書かれた説明は難しく感じる。 信頼感・判断 文字から感じる自信や説得力が判断に影響する。
15. 閑話休題：UDフォントって何？ より多くの人が読みやすいよう 設計されたフォント UDデジタル教科書体のように弱視やディスレクシアの方をターゲットに開発 されたフォントもありますが、全てのUDフォントがディスレクシア向けに開 発されているわけではありません。
16. 閑話休題：UDフォントって何？ 出典：https://www.morisawa.co.jp/fonts/udfont/
17. ウェブ フォントの 基礎知識 今さら理解する ウェブフォントver.2026
18. ウェブフォントの仕組み ブラウザ ①CSSでフォントを指定 ④レンダリング Hello, Aa ②リクエスト ③フォントを取得 サーバー フォントファイル
19. ウェブフォントの仕組み（レンダリング） ① 読み込み ② フォント選択 ③ 字形に変換 ④ 配置を計算 ⑤ 画素に変換 ⑥ 合成・表示
20. @font-face { font-family: "SiteFont"; src: url("/fonts/sitefont.woff2") format("woff2"); font-weight: 400; font-display: swap; } body { font-family: "SiteFont"; font-weight: 400; }
21. font-display ウェブフォントの読み込みを待つ間、文字をどう表示するかを決める 値 読み込み中の表示 読み込み後の切り替え auto ブラウザに任せる ブラウザに任せる swap 代替フォント 指定されたフォントに切り替え block 2～3秒テキスト非表示、 指定されたフォントに切り替え 代替フォントに切り替えその後
22. 日本語ウェブフォントが背負う業 フォントデータが重すぎる😭 文字数が多すぎる（常用漢字2,136文字）、字形が複雑すぎる。 日本語ウェブフォントの歴史はデータの重さとの戦いの歴史。 中国語、韓国語も同じ問題を抱えているのでCJKフォントとして括られがち。 Noto Sans JPのフォントデータサイズはTTF形式で5.7MB/ウエイト。
23. フォントファイルの重さに対処するための2要素 圧縮 サブセット
24. 圧縮
25. フォントファイル形式 OTF/TTF 一般的なフォント ファイル形式。重い。 圧縮 WOFF2 ウェブフォント用 の形式。軽い。
26. WOFF2 Web Open Font Formatの改良版 2014年：公開草案、2018年：W3C勧告 2018年時点では最新技術だったが、8年経過し普及完了した印象 Brotli（Googleが開発した汎用データ圧縮アルゴリズム）を採用し、 WOFFよりも高い圧縮率を実現 OTF→WOFF2→（ブラウザで復元）→フォントを表示
27. Noto Sans JPを圧縮すると OTF：5.7MB WOFF2：2.3MB 削減量：3.4MB
28. サブセット
29. サブセット=不要な文字を削る 静的なサブセッティング あらかじめ文字数を削ったフォントデータを用意する方法。 JIS第一水準に含まれない漢字を削除するのが一般的。 ダイナミックサブセッティング ページに表示されている文字をJSで検知しサーバーに送信、 サーバー側で動的にサブセットしたフォントデータを読み込む方法。 Adobe Fontsなどのフォント配信サービスで利用されている。
30. フォントファイルの分割 unicode-rangeでファイルを分割し ダウンロードするデータ数を削減する ファイルを細かく分割し、CSSのunicode-rangeプロパティを使用して 表示されている文字が含まれるファイルのみをダウンロードする方法。 JSを動作させなくて良い、キャッシュが効く、動的なページの変化に強い などのメリットがある。
31. /* ひらがな */ @font-face { font-family: "MyJapaneseFont"; src: url("/fonts/hiragana.woff2") format("woff2"); font-weight: 400; unicode-range: U+3040-309F; } /* 漢字 */ @font-face { font-family: "MyJapaneseFont"; src: url("/fonts/kanji.woff2") format("woff2"); font-weight: 400; unicode-range: U+4E00-9FFF; }
32. @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/notosansjp/v57/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.1.woff2) format('woff2'); unicode-range: U+1f235-1f23b, U+1f240-1f248, U+1f250-1f251, U+2000b, U+20089-2008a, U+200a2, U+200a4, U+200b0, U+200f5, U+20158, U+201a2, U+20213, U+2032b, U+20371, U+20381, U+203f9, U+2044a, U+20509, U+2053f, U+205b1, U+205d6, U+20611, U+20628, U+206ec, U+2074f, U+207c8, U+20807, U+2083a, U+208b9, U+2090e, U+2097c, U+20984, U+2099d, U+20a64, U+20ad3, U+20b1d, U+20b9f, U+20bb7, U+20d45, U+20d58, U+20de1, U+20e64, U+20e6d, U+20e95, U+20f5f, U+21201, U+2123d, U+21255, U+21274, U+2127b, U+212d7, U+212e4, U+212fd, U+2131b, U+21336, U+21344, U+213c4, U+2146d-2146e, U+215d7, U+21647, U+216b4, U+21706, U+21742, U+218bd, U+219c3, U+21a1a, U+21c56, U+21d2d, U+21d45, U+21d62, U+21d78, U+21d92, U+21d9c, U+21da1, U+21db7, U+21de0, U+21e33-21e34, U+21f1e, U+21f76, U+21ffa, U+2217b, U+22218, U+2231e, U+223ad, U+22609, U+226f3, U+2285b, U+228ab, U+2298f, U+22ab8, U+22b46, U+22b4f-22b50, U+22ba6, U+22c1d, U+22c24, U+22de1, U+22e42, U+22feb, U+231b6, U+231c3-231c4, U+231f5, U+23372, U+233cc, U+233d0, U+233d2-233d3, U+233d5, U+233da, U+233df, U+233e4, U+233fe, U+2344a-2344b, U+23451, U+23465, U+234e4, U+2355a, U+23594, U+235c4, U+23638-2363a, U+23647, U+2370c, U+2371c, U+2373f, U+23763-23764, U+237e7, U+237f1, U+237ff, U+23824, U+2383d, U+23a98, U+23c7f, U+23cbe, U+23cfe, U+23d00, U+23d0e, U+23d40, U+23dd3, U+23df9-23dfa, U+23f7e, U+2404b, U+24096, U+24103, U+241c6, U+241fe, U+242ee, U+243bc, U+243d0, U+24629, U+246a5, U+247f1, U+24896, U+248e9, U+24a4d, U+24b56, U+24b6f, U+24c16, U+24d14, U+24e04, U+24e0e, U+24e37, U+24e6a, U+24e8b, U+24ff2, U+2504a, U+25055, U+25122, U+251a9, U+251cd, U+251e5, U+2521e, U+2524c, U+2542e, U+2548e, U+254d9, U+2550e, U+255a7, U+2567f, U+25771, U+257a9, U+257b4, U+25874, U+259c4, U+259cc, U+259d4, U+25ad7, U+25ae3-25ae4, U+25af1, U+25bb2, U+25c4b, U+25c64, U+25da1, U+25e2e, U+25e56, U+25e62, U+25e65, U+25ec2, U+25ed8; }
33. Incremental Font Transfer 必要なフォントデータを少しずつ
 読み込む仕組み（W3Cで議論中） 最低限の文字が収録された初期フォントをまず読み込み、足りない文字を少し ずつ足していく。 サブセッティングの考え方を総合した仕組み。詳細は後述。
34. 閑話休題：フォントの著作権 フォントの著作権は フォントのデータに発生する 「Asahi」ロゴマーク事件が有名。 情報伝達を前提にしたフォントには著作権が発生しない。 しかしフォントのデータには著作権が発生する。 ゲームの海賊版が著作権で取り締まられるのと同じ。
35. 閑話休題：フォントのライセンス 圧縮（拡張子の変更）やサブセットは フォントの改変にあたるので注意 ウェブフォントとしてフォントを利用するためにはフォントのライセンスで フォントの改変と再配布（WOFF2ファイルをWeb上で公開すること）が認め られていなければならない。 フォントのライセンスは複雑なので、基本的にウェブフォント配信サービスを 利用することをおすすめする。
36. バリアブルフォント
37. バリアブルフォント=可変軸を持つフォント 可変軸によってフォントの形を動的に 変更できるフォント 通常のフォントはウエイトや字体（イタリック、コンデンスなど）によって ファイルが分割されているが、バリアブルフォントではそれらを1つのフォント ファイルに統合し、変数によって動的に変更できるようになっている。
38. @font-face { font-family: "SiteVariable"; src: url("/fonts/site-variable.woff2") format("woff2"); font-weight: 100 900; } h1 { font-weight: 720; }
39. .logo { font-variation-settings: "SRIF" 500, "wght" 600; }
40. バリアブルフォントはCJKフォントの救世主？ 読み込むファイルサイズを 小さくできる可能性はあるが… 1ページで2ウエイト以上使用する場合は、ウエイトごと分割されたものより バリアブルフォントを使用したほうが読み込むファイルサイズを小さくできる 可能性がある。 しかしバリアブルフォントに対応した日本語フォントは現状かなり少ない。
41. ウェブ フォントを 便利に使う 今さら理解する ウェブフォントver.2026
42. ちらつきを抑える
43. CLSの大敵、FOUT 代替フォントから指定したフォントに切り替わる際に、ちらつき（レイアウト シフト）が発生する。 ウェブフォントを使ううえで厄介な問題の1つ。 以前はFOUTの瞬間を隠すしかなかったが、 今は「大きさを揃える」ことである程度対処できる。
44. size-adjustなどを使用して文字の大きさを揃える @font-face { font-family: "AdjustedFallback"; src: local("Yu Gothic Regular"), local("YuGothic-Regular"); font-weight: 400; size-adjust: 105%; ascent-override: 90%; descent-override: 20%; line-gap-override: 0%; }
45. CSS Fonts Level 4の紹介 デモ
46. まとめ 今さら理解する ウェブフォントver.2026
47. フォントを適切に選択することが重要 著作権やライセンスに気をつける WOFF2、unicode-rangeでのファイル分割など
 駆使して最適化する バリアブルフォントを活用する size-adjustなどを駆使してFOUTを回避する
48. Thank you!