閲覧中のサイトのデバイスフォントを調べる方法

eye-catch

今回はfirefoxの『調査』機能の新機能について 現在アップデートされたfirefox ver 22.0に搭載された新機能でサイトのデバイスフォントを調べる機能が搭載されました。

使い方

調査機能を立ち上げます。 ctrl + shift + I または 右クリックより『要素を調査』

blog_01

  調査機能が立ち上がりました。 後は『要素を選択』→『ページ内のデバイスフォントの要素を選択』→『調査機能右下の【フォント】を選択』

blog_02

結果

blog_03

右下に表示されました。 更に右下には【ページのすべてのフォントを表示】という機能がありますね。これで全部見れます。

Webフォントを調べてみる。

Google Fonts Webフォントの場合は以下のように出るようです。 

blog_04

  • フォントがWebフォントであること。(フォントのサムネイル箇所の右に (リモート) の記述がある。
  • 使用フォント名
  • どこからフォントを取得しているか
  • そして、cssでどうやって記述されているのか

以上のことが分かります。とっても便利な機能です。 更にWebフォントアイコンの場合 参考:画像の代わりに使えるアイコンタイプのWebフォントのまとめ  

blog_05

プレビュー部分はアルファベットなのですが、下の詳細をみれば、どのように記述されているか分かるかと思います。

日本語Webフォント

参考:FONT PLUS-フォント検索      

blog_06

スマートフォンサイトが増えていくにしたがって、Webフォント、Webアイコンが取り入れられていくと思います。Webフォントを利用したサイトがどんなものを使っているか、確認できると便利ですよね。