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
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
450
Bulletproof Design System with TypeScript
takanorip
7
4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
180
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
170
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
180
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
130
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
250
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
280
Grafana Meetup Japan Vol. 6
kaedemalu
1
150
JavaScript 研修
recruitengineers
PRO
5
1.2k
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
9
320
TypeScript入門
recruitengineers
PRO
33
10k
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
540
実践AIガバナンス
asei
3
220
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.9k
Facilitating Awesome Meetings
lara
55
6.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Raft: Consensus for Rubyists
vanstee
140
7.1k
How STYLIGHT went responsive
nonsquared
100
5.8k
Automating Front-end Workflow
addyosmani
1370
200k
Unsuck your backbone
ammeep
671
58k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
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)