Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
解剖 Google Fonts
Search
takanorip
September 27, 2018
Technology
0
100
解剖 Google Fonts
takanorip
September 27, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
790
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
350
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.2k
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
OPENLOGI Company Profile
hr01
0
60k
JavaにおけるNull非許容性
skrb
2
2.7k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
770
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.5k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
3k
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Featured
See All Featured
Fireside Chat
paigeccino
35
3.2k
Git: the NoSQL Database
bkeepers
PRO
428
65k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Thoughts on Productivity
jonyablonski
69
4.5k
Unsuck your backbone
ammeep
669
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Transcript
解剖 Google Fonts Takanori Oki 最近のWeb技術についてワイワイ語る会
⾃⼰紹介 • Takanori Oki / @takanorip • フロントエンドエンジニア 10⽉からFOLIO •
Nuxt.js / Vue.js / React / Polymer • フォントが好き
None
ウェブフォント関連のお仕事 お待ちしております!!
Google Fonts
⽇本語フォント 配信開始されましたね!
早期アクセス版って あったよね?
今⽇はそのへんの諸々
丸裸にします
⽇本語ウェブフォントの 問題点
重い
⽇本語フォント重たい問題 • ⽂字数がやたらと多い • JIS第⼀⽔準漢字だけでも約3000字ある • グリフが複雑 • Noto Sans
CJK JPはサブセットなしの WOFF2形式で11MBある
Google Fontsは どうやって問題を 解決しているか
Google Fontsの技術 • サブセット化 • ファイル分割 • ユニコードレンジ • HTTP/2
• 機械学習(?)
最先端の技術 もりもり
Google Fontsのすごいとこ • CSSだけで使えるようにしたい • ファイルを120個に分割して ユニコードレンジを指定して 必要なファイルだけダウンロードしている • HTTP/2で並列ダウンロード
Google Fontsのすごいとこ • ファイル分割のアルゴリズムを導出するのに 機械学習使ってるっぽい • 検索インデックスのデータとか使って ⽂字の利⽤頻度を計算、それをもとに ファイル分割 •
クロスサイトキャッシングを狙ってる
Google Fontsすごい!
おわり! (フォント:Noto Sans CJK JP)