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
780
効果的な管理画面を デザインをするために 避けるべき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
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.2k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
IAMのマニアックな話2025
nrinetcom
PRO
4
910
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
Share my, our lessons from the road to re:Invent
naospon
0
150
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
120
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
300
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
2
120
Fraxinus00tw assembly manual
fukumay
0
110
Featured
See All Featured
A better future with KSS
kneath
238
17k
Designing for humans not robots
tammielis
250
25k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Producing Creativity
orderedlist
PRO
344
40k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Thoughts on Productivity
jonyablonski
69
4.5k
Facilitating Awesome Meetings
lara
52
6.2k
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)