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.1k
ウェブフォントのエモい話
takanorip
April 24, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
410
Ubieとアクセシビリティのこれからを考える
takanorip
0
390
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k
Other Decks in Technology
See All in Technology
Lexical Analysis
shigashiyama
1
150
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
170
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.1k
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
940
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
370
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
190
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
The Cult of Friendly URLs
andyhume
78
6k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
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)