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
takanorip
April 24, 2018
Technology
3
3.2k
ウェブフォントのエモい話
takanorip
April 24, 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
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
350
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
590
Witchcraft for Memory
pocke
1
440
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
A2Aのクライアントを自作する
rynsuke
1
190
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
解析の定理証明実践@Lean 4
dec9ue
0
180
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
660
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rails Girls Zürich Keynote
gr2m
94
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Unsuck your backbone
ammeep
671
58k
The Cult of Friendly URLs
andyhume
79
6.5k
Faster Mobile Websites
deanohume
307
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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)