Share
Embed
Slide 1
Slide 1 text
今さら理解する
ウェブフォント
ver.2026
takanorip / 大木尊紀
2026.10.12
Slide 2
Slide 2 text
takanorip
株式会社カンム デザインマネージャー
フロントエンドエンジニアからUIデザイナー、
デザインエンジニアを経て2025年7月から
デザインマネージャーをしている。
Slide 3
Slide 3 text
株式会社カンム
お金の新しい選択肢をつくる
私たちはソフトウェアを通してお
金の新しい選択肢をつくり、日々
の生活や事業、商流の中に金融を
溶け込ませ、誰もが自然な形で金
融にアクセスできる社会を目指し
ます。
Slide 4
Slide 4 text
イントロダクション
ウェブフォントを使う意義
ウェブフォントの基礎知識
ウェブフォントを快適に使う
まとめ
目次
01
02
03
04
05
Slide 5
Slide 5 text
イントロ
ダクション
今さら理解する
ウェブフォントver.2026
Slide 6
Slide 6 text
過去の発信
Slide 7
Slide 7 text
今日話すこと
あれから何が変わった？
今のスタンダード
ウェブフォントの未来
Slide 8
Slide 8 text
ウェブフォントは楽しい！
Slide 9
Slide 9 text
ウェブ
フォントを
使う意義
今さら理解する
ウェブフォントver.2026
Slide 10
Slide 10 text
メディアにおけるフォントの歴史
写本 →活版印刷→写植 →DTP
手書き→金属活字→文字盤→データ
フォントの歴史は印刷の歴史でもある。
活版印刷の頃からデザインに応じてフォントを変更することが可能になり、
現在に至るまで数十万種類以上のフォントが生み出されてきた。
Slide 11
Slide 11 text
フォントを
自由に変更できることは
技術の進歩と
フォント制作者の努力の結晶
Slide 12
Slide 12 text
フォントにこだわらないと
もったいない！
Slide 13
Slide 13 text
なぜ人々はフォントを変えるのか
情報伝達において
非言語的コミュニケーションが
非常に重要だから
人間は文章だけでなくフォントの影響も受けながら情報を受け取っている。
内容にそぐわないフォントを使うと伝達効率も下がる。
フォントの選定はデザインの根幹である。
Slide 14
Slide 14 text
フォントが人々に与える影響
ブランドの印象 同じ名前でもロゴフォントによって評価が変わる。
感情・雰囲気 親しみや緊張感など、「声色」に近いものを感じる。
読む速さ・負担 フォントによって文章を読む速さが変わる。
行動への意欲 読みにくいフォントで書かれた説明は難しく感じる。
信頼感・判断 文字から感じる自信や説得力が判断に影響する。
Slide 15
Slide 15 text
閑話休題：UDフォントって何？
より多くの人が読みやすいよう
設計されたフォント
UDデジタル教科書体のように弱視やディスレクシアの方をターゲットに開発
されたフォントもありますが、全てのUDフォントがディスレクシア向けに開
発されているわけではありません。
Slide 16
Slide 16 text
閑話休題：UDフォントって何？
出典：https://www.morisawa.co.jp/fonts/udfont/
Slide 17
Slide 17 text
ウェブ
フォントの
基礎知識
今さら理解する
ウェブフォントver.2026
Slide 18
Slide 18 text
ウェブフォントの仕組み
ブラウザ
①CSSでフォントを指定
④レンダリング
Hello, Aa
②リクエスト
③フォントを取得
サーバー
フォントファイル
Slide 19
Slide 19 text
ウェブフォントの仕組み（レンダリング）
① 読み込み
② フォント選択
③ 字形に変換
④ 配置を計算
⑤ 画素に変換
⑥ 合成・表示
Slide 20
Slide 20 text
@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;
}
Slide 21
Slide 21 text
font-display
ウェブフォントの読み込みを待つ間、文字をどう表示するかを決める
値
読み込み中の表示
読み込み後の切り替え
auto
ブラウザに任せる
ブラウザに任せる
swap 代替フォント
指定されたフォントに切り替え
block 2～3秒テキスト非表示、
指定されたフォントに切り替え
代替フォントに切り替えその後
Slide 22
Slide 22 text
日本語ウェブフォントが背負う業
フォントデータが重すぎる😭
文字数が多すぎる（常用漢字2,136文字）、字形が複雑すぎる。
日本語ウェブフォントの歴史はデータの重さとの戦いの歴史。
中国語、韓国語も同じ問題を抱えているのでCJKフォントとして括られがち。
Noto Sans JPのフォントデータサイズはTTF形式で5.7MB/ウエイト。
Slide 23
Slide 23 text
フォントファイルの重さに対処するための2要素
圧縮
サブセット
Slide 24
Slide 24 text
圧縮
Slide 25
Slide 25 text
フォントファイル形式
OTF/TTF
一般的なフォント
ファイル形式。重い。
圧縮
WOFF2
ウェブフォント用
の形式。軽い。
Slide 26
Slide 26 text
WOFF2
Web Open Font Formatの改良版
2014年：公開草案、2018年：W3C勧告
2018年時点では最新技術だったが、8年経過し普及完了した印象
Brotli（Googleが開発した汎用データ圧縮アルゴリズム）を採用し、
WOFFよりも高い圧縮率を実現
OTF→WOFF2→（ブラウザで復元）→フォントを表示
Slide 27
Slide 27 text
Noto Sans JPを圧縮すると
OTF：5.7MB
WOFF2：2.3MB
削減量：3.4MB
Slide 28
Slide 28 text
サブセット
Slide 29
Slide 29 text
サブセット=不要な文字を削る
静的なサブセッティング
あらかじめ文字数を削ったフォントデータを用意する方法。
JIS第一水準に含まれない漢字を削除するのが一般的。
ダイナミックサブセッティング
ページに表示されている文字をJSで検知しサーバーに送信、
サーバー側で動的にサブセットしたフォントデータを読み込む方法。
Adobe Fontsなどのフォント配信サービスで利用されている。
Slide 30
Slide 30 text
フォントファイルの分割
unicode-rangeでファイルを分割し
ダウンロードするデータ数を削減する
ファイルを細かく分割し、CSSのunicode-rangeプロパティを使用して
表示されている文字が含まれるファイルのみをダウンロードする方法。
JSを動作させなくて良い、キャッシュが効く、動的なページの変化に強い
などのメリットがある。
Slide 31
Slide 31 text
/* ひらがな */
@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;
}
Slide 32
Slide 32 text
@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;
}
Slide 33
Slide 33 text
Incremental Font Transfer
必要なフォントデータを少しずつ
読み込む仕組み（W3Cで議論中）
最低限の文字が収録された初期フォントをまず読み込み、足りない文字を少し
ずつ足していく。
サブセッティングの考え方を総合した仕組み。詳細は後述。
Slide 34
Slide 34 text
閑話休題：フォントの著作権
フォントの著作権は
フォントのデータに発生する
「Asahi」ロゴマーク事件が有名。
情報伝達を前提にしたフォントには著作権が発生しない。
しかしフォントのデータには著作権が発生する。
ゲームの海賊版が著作権で取り締まられるのと同じ。
Slide 35
Slide 35 text
閑話休題：フォントのライセンス
圧縮（拡張子の変更）やサブセットは
フォントの改変にあたるので注意
ウェブフォントとしてフォントを利用するためにはフォントのライセンスで
フォントの改変と再配布（WOFF2ファイルをWeb上で公開すること）が認め
られていなければならない。
フォントのライセンスは複雑なので、基本的にウェブフォント配信サービスを
利用することをおすすめする。
Slide 36
Slide 36 text
バリアブルフォント
Slide 37
Slide 37 text
バリアブルフォント=可変軸を持つフォント
可変軸によってフォントの形を動的に
変更できるフォント
通常のフォントはウエイトや字体（イタリック、コンデンスなど）によって
ファイルが分割されているが、バリアブルフォントではそれらを1つのフォント
ファイルに統合し、変数によって動的に変更できるようになっている。
Slide 38
Slide 38 text
@font-face {
font-family: "SiteVariable";
src: url("/fonts/site-variable.woff2") format("woff2");
font-weight: 100 900;
}
h1 {
font-weight: 720;
}
Slide 39
Slide 39 text
.logo {
font-variation-settings: "SRIF" 500, "wght" 600;
}
Slide 40
Slide 40 text
バリアブルフォントはCJKフォントの救世主？
読み込むファイルサイズを
小さくできる可能性はあるが…
1ページで2ウエイト以上使用する場合は、ウエイトごと分割されたものより
バリアブルフォントを使用したほうが読み込むファイルサイズを小さくできる
可能性がある。
しかしバリアブルフォントに対応した日本語フォントは現状かなり少ない。
Slide 41
Slide 41 text
ウェブ
フォントを
便利に使う
今さら理解する
ウェブフォントver.2026
Slide 42
Slide 42 text
ちらつきを抑える
Slide 43
Slide 43 text
CLSの大敵、FOUT
代替フォントから指定したフォントに切り替わる際に、ちらつき（レイアウト
シフト）が発生する。
ウェブフォントを使ううえで厄介な問題の1つ。
以前はFOUTの瞬間を隠すしかなかったが、
今は「大きさを揃える」ことである程度対処できる。
Slide 44
Slide 44 text
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%;
}
Slide 45
Slide 45 text
CSS Fonts Level 4の紹介
デモ
Slide 46
Slide 46 text
まとめ
今さら理解する
ウェブフォントver.2026
Slide 47
Slide 47 text
フォントを適切に選択することが重要
著作権やライセンスに気をつける
WOFF2、unicode-rangeでのファイル分割など
駆使して最適化する
バリアブルフォントを活用する
size-adjustなどを駆使してFOUTを回避する
Slide 48
Slide 48 text
Thank you!