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
130
Bulletproof Design System with TypeScript
takanorip
6
3.5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
140
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
890
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.2k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
490
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Technology
See All in Technology
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
190
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
How Community Opened Global Doors
hiroramos4
PRO
1
120
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
210
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Embracing the Ebb and Flow
colly
86
4.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Applications with DynamoDB
mza
95
6.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimizing for Happiness
mojombo
379
70k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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)