Webサイトに使われているフォントを調べる方法

こんにちは。
大阪でWEBコンサルティングとWEB制作をしているワイズオフィスです。

今回はWEBフォントについて書きたいと思います。

WEBで使えるフォントとは

WEBサイトで利用できるフォントには制限があります。通常のパソコンで利用されるフォントがそのまま利用できるわけではありません。

またフォントを指定したとしても、閲覧ユーザーが対応したフォントを持っていなければ、そのフォントは利用できず、別のフォントで表示されてしまいます。

そのためWEBサイトの制作者はフォントを指定する際には複数のフォントを指定して、仮に一番目に指定したフォントが対応しなかったとしても、二番目、三番目のフォントが表示されるように指定することが多いです。

また、閲覧ユーザーの環境に依存せずにフォントを表示させるために、WEBフォントを利用するという手もあります。
WEBフォントでは、WEB上から直接フォントを読み込むため、ユーザーの環境に依存せず、指定のフォントを表示させることができます。
ただし、ネットから読み込むため、読み込みに時間がかかってしまう場合があることがデメリットです。

フォントを調べる方法

WEBで使われているフォントを調べるには2つの方法がおすすめです。

CSSを調査する。

WEBブラウザには開発者モード（もしくはデベロッパーモード）という機能があり、そこから表示されているテキストのHTMLやCSSを確認することができます。

Google Chromeであれば該当エリアで右クリックをし、メニューの中から「検証」をクリックすると出てきます。

Microsoft Edge でも該当エリアで右クリックをし、メニューの中から「開発者ツールy」をクリックすると出てきます。

Chromeのアドオンを利用する

Google Chromeに追加で実装できるアドオンの中に「WhatFont」というツールがあります。これを利用するとサイトに使われているフォントを簡単に把握することができます。

リンク

使いかたはChromeにアドオンを入れたのち、アドオンを起動して該当箇所をクリックするだけです。