他のブログやサイトを見ているときに、「このフォント読みやすくて良いな～」と思ったことありませんか？
今回は他のサイトやブログのフォントを調べる方法をご紹介したいと思います。
ブログやサイトのフォントを調べる方法
ブログやサイトのフォントを調べる方法はいくつかあります。
1.ブラウザのデベロッパーツールを使用する方法
ChromeやFirefoxなどブラウザには標準で搭載されているデベロッパーツールでフォントを調べることができます。
例）Google Chromeの場合
- STEP.1気になるfontの文章をドラッグで反転
- STEP.2青くなった部分を右クリック⇒「検証」を押す
- STEP.3画面右側に現れるデベロッパーツール中央右辺りにあるウインドを下までスクロール
Meiryoと書かれているのがフォント名です。
この方法ならブラウザさえあれば利用できます。
ちなみにデベロッパーツールでは、そのサイトで使われている色も確認することが可能です。
2.Chromeの拡張機能を利用する方法
Googleの拡張機能であるWhat Fontはフォントを取得するための機能ということもあり、font-familyだけでなくサイズや色の情報まで取得できます。
しかし、上記２つの方法では画像の中にあるフォントは取得することができません。
次は画像中のフォントを取得する方法をご紹介します。
3.画像内のフォントを取得する方法
WhatTheFontというサイトなら画像内のフォントを調べてくれます。
画像から読み込むということで、100％の正確性がある訳ではありませんが、高確率で正しいフォントを示してくれ、上記方法と組み合わせることでほぼすべてのサイトのフォントを知ることができます。
- STEP.1調べたいフォントを含んでいる画像を保存しておきます。
今回はこちらの画像で検証
- STEP.2タイトル2WhatTheFontのサイトに移動し、画像をアップロードする。
- STEP.3タイトル3調べたいテキストを選択し、灰色の点線で囲まれた状態で横ボタンを押す
- STEP.4タイトル4
フォントの判定結果を確認する
以上で完了です。
全く同じではなくても、かなり近いフォントが表示されているはずです。
ちなみに、スマホ用のアプリもあります。
4.フォントの特徴から調べる方法
Identifontというサイトでは、フォントの特徴に対する質問を答えることで、なんのフォントか答えてくれます。
- タイトル１
Identifontのサイトへ移動する
今回はメイリオのフォントで試してみました。
- タイトル2
「形状別フォント」を選択する
- タイトル3
フォントを見ながら質問に答えていく
- タイトル4
質問の回答からフォントが導き出される
見事正解でした。
Identifontは英語のフォントでも利用可能です。
以上、ブログやサイトのフォントを調べる方法についてご紹介しました。
フォントもブログの印象を大きく変える要因になるので、お気に入りのフォントを見つけられるといいですね。
コメント