最近Webフォントを利用する機会が増えています。
そうじゃなくてもいち要素に対して複数のフォント指定を行なっていると思います。
そんな設定状態でじゃあ実際にはどのフォントが反映されているんだろう？
というのを確認する方法です。
概要
CSSでfont-family指定をしていていも、
ローカルフォントが適用されているだけなのか、
ぱっと見ではわかりません。
それを確認する方法がChromeのDevToolsにはあったので備忘録として残します。
手順
- 該当ページをChromeで表示
- 該当要素をInspect(
Shift+Cmd+C)で選択 -
Elements > Computed > Rendered Fonts を確認
※ Panel Layout が horizontalの場合はStylesの右カラム最下部
表示内容
- Network resourceと表示されていたらWebフォントが適用されています。
- Local fileと表示されていたら閲覧しているPC内のフォントが適用されています。