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
110
解剖 Google Fonts
takanorip
September 27, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
580
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Technology
See All in Technology
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
190
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
310
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
190
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
140
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
320
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
The Invisible Side of Design
smashingmag
302
51k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Scaling GitHub
holman
463
140k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
GitHub's CSS Performance
jonrohan
1032
470k
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)