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
ウェブフォントのエモい話
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
takanorip
April 24, 2018
Technology
3
3.2k
ウェブフォントのエモい話
takanorip
April 24, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
900
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
650
Bulletproof Design System with TypeScript
takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
250
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
550
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.4k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
17k
AWS Network Firewall Proxyを触ってみた
nagisa53
1
240
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.2k
Red Hat OpenStack Services on OpenShift
tamemiya
0
120
Greatest Disaster Hits in Web Performance
guaca
0
270
Digitization部 紹介資料
sansan33
PRO
1
6.8k
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
nihonbuson
PRO
2
320
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
Ruby版 JSXのRuxが気になる
sansantech
PRO
0
160
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
rvirus0817
1
1.5k
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
yuu551
0
250
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
Amusing Abliteration
ianozsvald
0
100
Utilizing Notion as your number one productivity tool
mfonobong
3
220
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.3k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
The Pragmatic Product Professional
lauravandoore
37
7.1k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
The Cult of Friendly URLs
andyhume
79
6.8k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
56
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7k
Transcript
ウェブフォントの エモい話 Takanori Oki @Roppongi.js #2
自己紹介 • Takanori Oki ( @takanorip ) • 株式会社スマートドライブ •
フロントエンドエンジニア • Nuxt.js、React、Polymer、その他ウェブ制作 • フォントが好き
ウェブフォントの本 書きました
None
None
JSあんまり関係ないかも… ごめんなさい…
ウェブフォント 使ってますか?
「ウェブフォントって重いよね」
「ウェブフォント使うと パフォーマンス落ちるよね」
None
それ、ちゃんと使ってから 言ってる?
ウェブフォントの課題 • フォントデータは重い (特に日本語フォントは重い、漢字のせい) • テキストレンダリングをブロックしてしまう こともある • ネットワークが遅いと問題になりがち
技術で解決できる! (ちょっと大変だけど)
それでも ウェブフォントを使う理由
デバイスやOSに依存せず、 デザインのクオリティを 保つため
そんなにデザイン大事? • フォントはサイトの「印象」を左右する • 同じデザインでもフォントによって、 テキストの可読性や全体の雰囲気が変わる • ブランディングやユーザー体験に直結する
デザインをきちんと再現するのも フロントエンドエンジニアの役目
しかし!
何も考えずに使うと パフォーマンスの低下を招く 諸刃の剣
なんで遅いの?
None
Font Loading API
Font Loading API • Promiseを返す • CSSのfont-faceをJSから制御する • フォントのローディング状態を監視できる •
モダンブラウザなら使える(IEは無視)
preload
宣伝
詳しい手法については 「イヌでもわかるウェブフォント」 をご覧ください!!
おわり (フォント:源柔ゴシックL)