【やらなきゃ損】Amazonギフトチャージでサクッと1,000円ゲット >>

ブログのフォントを調べる方法【2019年最新】

他のブログやサイトを見ているときに、「このフォント読みやすくて良いな~」と思ったことありませんか?

 

今回は他のサイトやブログのフォントを調べる方法をご紹介したいと思います。

また、WordPress最強の無料テーマ「Cocoon」で好きなフォントを利用する方法も併せてご紹介いたします。

 

スポンサーリンク

ブログやサイトのフォントを調べる方法

ブログやサイトのフォントを調べる方法はいくつかあります。

 

1.ブラウザのデベロッパーツールを使用する方法

ChromeやFirefoxなどブラウザには標準で搭載されているデベロッパーツールでフォントを調べることができま

 

例)Google Chromeの場合

  • 手順1
    気になるfontの文章をドラッグで反転

     

  • 手順2
    青くなった部分を右クリック⇒「検証」を押す

  • 手順3
    画面右側に現れるデベロッパーツール中央右辺りにあるウインドを下までスクロール

    Meiryoと書かれているのがフォント名です。

この方法ならブラウザさえあれば利用できます。

 

ちなみにデベロッパーツールでは、そのサイトで使われている色も確認することが可能です。

 

他のサイトや画像のカラーコードを調べる方法8選
普段他の方のブログやサイトを拝見しているときに、 「この色いいな~」 って思うことありますよね。 カラーコードは1,600万通り以上もあるので原色大辞典などでそれっぽい色を見つけても、全く同じ色である可能性は極めて...

2.Chromeの拡張機能を利用する方法

Googleの拡張機能であるWhat Fontはフォントを取得するための機能ということもあり、font-familyだけでなくサイズや色の情報まで取得できます。

 

  • 手順1
    What FontのページをGoogle Chromeで開く

  • 手順2
    右上にあるChromeに追加をクリック

  • 手順3
    ブラウザ右上のツールバーに追加されたアイコンをクリック

    下に「Exit WhatFont」が表示されれば起動中です。

    (起動しない方はChromeを再起動してみてください)

  • 手順4
    調べたいテキストをクリック

    Familyの中で左側から優先的に割り当てられていきます。

注意

上記2つの方法では画像の中にあるフォントは取得することができません。

 

3.画像内のフォントを取得する方法

WhatTheFontというサイトなら画像内のフォントを調べてくれます。

 

画像から読み込むということで、100%の正確性がある訳ではありませんが、高確率で正しいフォントを示してくれ、上記方法と組み合わせることでほぼすべてのサイトのフォントを知ることができます

  • 手順1
    調べたいフォントを含んでいる画像を保存しておきます。

    今回はこちらの画像で検証

  • 手順2
    WhatTheFontのサイトに移動し、画像をアップロードする。

  • 手順3
    調べたいテキストを選択し、灰色の点線で囲まれた状態で横ボタンを押す

  • 手順4
    フォントの判定結果を確認する

以上で完了です。

全く同じではなくても、かなり近いフォントが表示されているはずです。

 

ちなみに、スマホ用のアプリもあります。

WhatTheFont

WhatTheFont
開発元:MyFonts Inc.
無料
posted withアプリーチ

 

4.フォントの特徴から調べる方法

Identifontというサイトでは、フォントの特徴に対する質問を答えることで、なんのフォントか答えてくれます。

 

  • 手順1
    Identifontのサイトへ移動する

    今回はメイリオのフォントで試してみました。

  • 手順2
    「形状別フォント」を選択する

  • 手順3
    フォントを見ながら質問に答えていく

  • 手順4
    質問の回答からフォントが導き出される

 

見事正解でした。

 

Identifontは英語のフォントでも利用可能です。

 

『英語版のIdentifont』を利用する >>

 

 

スポンサーリンク

好きなフォントを利用する方法

お気に入りのフォントが見つかったら、実際にフォントをサイトに適用してみましょう。

今回はCocoonで適用する方法をご紹介します。

 

1.Google Fontsからフォントを取得する

フォントを利用するには、Webフォントという形で読み込む方法が手っ取り早いです。

Google Fontsでは940種類ものフォントを無料で利用できます。

 

  • 手順1
    Google Fontsのサイトへ移動する
  • 手順2
    好きなフォントを探して「+マーク」をクリック

    ポイント

    「Language」からJapaneseを選択すると日本語フォントのみ表示できます。

  • 手順3
    画面下部に表示されたボックスの「ーマーク」をクリック

  • 手順4
    「CUSTOMIZE」からスタイルを指定する

    注意

    太字などはここで指定しておかないと表示できません。

  • 手順5
    「EMBED」を選択してコードをコピーする

2.フォントを適用する

それでは実際にフォントをCocoon(WordPress)で適用してみたいと思います。

 

  • 手順1
    「外観」⇒「テーマエディター」で「Cocoon Child」のテーマを選択し、「head-insert.php」を開き、<link ~>のリンクを一番下に貼り付ける

     

  • 手順2
    同じくテーマエディターの「style.css」の好きな箇所に「font-family」を記述する

    例:サイト全体に適用する場合は、

    body {
    font-family: ‘Noto Sans JP’, sans-serif;
    }

    のように記述します。

 

これで適用されるはずなのですが、なぜか自分のブログでは適用されませんでした。。。

うまく適用出来た方はTwitterのDM等頂けると幸いです。 @らっかー

らっかー
らっかー

未確認情報ですみません。

 


以上、ブログやサイトのフォントを調べる方法についてご紹介しました。

 

フォントもブログの印象を大きく変える要因になるので、お気に入りのフォントを見つけらるといいですね。

 

最後まで読んで頂きありがとうございました。

トップへ戻る
タイトルとURLをコピーしました