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
430
Bulletproof Design System with TypeScript
takanorip
6
3.9k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
920
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
人を動かすことについて考える
ichimichi
2
270
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
35
16k
Backboneとしてのtimm2025
yu4u
3
1.2k
第64回コンピュータビジョン勉強会@関東(後編)
tsukamotokenji
0
210
あなたの知らない OneDrive
murachiakira
0
210
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
190
GCASアップデート(202506-202508)
techniczna
0
230
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
190
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
110
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
3
320
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
180
結局QUICで通信は速くなるの?
kota_yata
9
7.5k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
What's in a price? How to price your products and services
michaelherold
246
12k
GitHub's CSS Performance
jonrohan
1031
460k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
470
Music & Morning Musume
bryan
46
6.7k
How to Ace a Technical Interview
jacobian
279
23k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Six Lessons from altMBA
skipperchong
28
4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
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)