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
3k
ウェブフォントのエモい話
takanorip
April 24, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
早わかり W3C Community Group
takanorip
0
270
Ubieとアクセシビリティのこれからを考える
takanorip
0
240
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
180
メンタルヘルスチューニング
takanorip
0
260
Other Decks in Technology
See All in Technology
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
450
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
610
Building Dashboards as a Hobby
egmc
0
360
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
18k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
360
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
3
630
生産性向上チームの紹介
cybozuinsideout
PRO
1
910
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
510
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
150
One engineer company with Ruby on Rails
rstankov
2
410
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
61
4k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
Testing 201, or: Great Expectations
jmmastey
29
6.4k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Happy Clients
brianwarren
92
6.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
How GitHub (no longer) Works
holman
305
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
7
1.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Designing for humans not robots
tammielis
248
25k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
What's new in Ruby 2.0
geeforr
337
31k
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)