Monochrome

読者です 読者をやめる 読者になる 読者になる

Monochrome

モノに関する情報をまとめたブログ

【保存版】おすすめのGoogleフォントを厳選して紹介!導入手順・使い方・フォントの探し方のまとめ

f:id:mono_kuro:20170118232525p:plain

ブログをカスタマイズする上で、とても重要なのが文字などのフォントです。

今回は手軽にフォントの変更ができて、なおかつお洒落なフォントが揃っているGoogleフォントのおすすめフォントを紹介したいと思います。

Googleフォントの使い方も解説していますので、よろしければ参考にしてみてください。

Googleフォントとは?

「Google  Fonts(グーグルフォント)」とはGoogleが無料で提供しているWebフォントのことです。

Webフォントを利用するとユーザーの閲覧環境に関わらずに同じフォントで表示することが可能です。

中でもGoogleフォントは簡単に導入できて、なおかつ種類も豊富なので利用すているサイトも多いと思います。

フォントを変えるだけでもブログの雰囲気がガラリと変わるので、ブログのカスタマイズに精を入れている方は覚えておいて損はないと思います。

 

Googleフォントを使うメリット

ここではWebフォントを導入することで得られるメリットについて解説したいと思います。

デザインの差別化ができる

一番のメリットはコレでしょう。通常、Windowsだと「メイリオ」、Macだと「ヒラギノ角ゴシック」で文章は表示されます。

ほとんどのサイトが標準のフォントで表示されるので、Webフォントを導入すれば、それだけでサイト・ブログの差別化が図れるということになります。

また、フォントが少し違うだけでも印象に残りやすくなりますね。

 

簡単に導入できる

導入方法がとても簡単なのもメリットの一つですね。

HTMLファイルを書き換えるだけで対応する箇所のフォントを一発で変更できるので気軽に試すことが出来ます。

文字の修正なども画像データと違い、テキストを書き換えるだけなので簡単に行えますね。

 

SEOに有利

上述の通り、Webフォントを導入することでテキストデータのまま、フォントを変更することが出来ます。

テキスト量は変わらないので、画像を使用するよりもSEOに有利と言えるでしょう。

 

Webフォントを使うデメリット

ここではWebフォントを導入することにより、起こりうるデメリットについて解説したいと思います。

読み込み速度が遅くなる

Webフォントは多用すると、それだけ読み込みに時間がかかってしまいます。特に日本語Webフォントを導入するとその違いは顕著になってきますね。 ただし、欧文のWebフォントのみを使用したり、高速化をすることで、このデメリットを解消することも可能です。

 

おすすめのGoogleフォント

シンプルフォント

シンプルなフォントは読みやすく、文中やヘッダー・サイドバー等どこで使っても間違いがない万能のフォントですね。

Open Sans

f:id:mono_kuro:20170117232800p:plain

シンプルでオーソドックスなサンセリフ体のフォントです。どんな場面で使用してもしっくりきますね。

Open Sans

 

Noto Sans

f:id:mono_kuro:20170117232753p:plain

サンセリフ体のシンプルなフォントです。スマートな印象があります。

Noto Sans

 

Abel

f:id:mono_kuro:20170117232704p:plain

細くてインテリ感が漂うお洒落なフォントです。こちらのフォントもどこでも使えそうですね。

Abel

 

Dosis

f:id:mono_kuro:20170117232656p:plain

スタイリッシュさを極めたフォントです。文字ごとのバランスも良く綺麗にまとまっていますね。

Dosis

 

Play

f:id:mono_kuro:20170117232650p:plain

レトロゲーム風のフォントですね。雰囲気があって好きです。

Play

 

Lora

f:id:mono_kuro:20170117232640p:plain

英語で長文を書くときに使用したいスタイリッシュで綺麗なフォントです。

Lora

 

Nunito

f:id:mono_kuro:20170117232625p:plain

丸みを帯びてポップな印象のあるサンセリフ体のフォントです。

Nunito

 

Bitter

f:id:mono_kuro:20170117232602p:plain

シンプルでどこか親しみが持てるフォントですね。

Bitter

 

ロゴ風フォント

ロゴ風フォントはブログの顔となる部分、ヘッダーなどに利用すると効果的だと思います。

Josefin Slab

f:id:mono_kuro:20170117233909p:plain

とにかくお洒落なフォントです。全体のバランスが良く、ロゴマークとして使用するとかっこういいですね。

Josefin Slab

 

Poiret One

f:id:mono_kuro:20170117233842p:plain

当ブログのヘッダーやサイドバーで使用しているフォントです。細身でシンプルな印象と小文字のeなどの遊び心のバランスが抜群ですね。

Poiret One

 

Orbitron

f:id:mono_kuro:20170117233757p:plain

各文字の丸部分が四角になっている面白いフォントです。メカニカルな雰囲気もありますね。

Orbitron

 

Unica One

f:id:mono_kuro:20170117233738p:plain

キュートでありながら統一感があってバランスも取れている、ユニークで面白いフォントです。

Unica One

 

Special Elite

f:id:mono_kuro:20170117233828p:plain

個性的でありながら、美しさもある独特のフォントですね。

Special Elite

 

Geostar

f:id:mono_kuro:20170117233818p:plain

中抜きが特徴の個性的なフォントです。個性的ですが、全体のバランスはとてもいいですね。

Geostar

 

Plaster

f:id:mono_kuro:20170117233809p:plain

全ての文字に縦線が入っているユニークなフォントです。文章というよりは完全にタイトルなどのロゴ用ですね。

Plaster

 

手書き風フォント

手書きのような味わいのあるフォントです。ワンポイントで使用するとお洒落ですね。

Nothing You Could Do

f:id:mono_kuro:20170117231151p:plain

まるでサインのような手書き感があるお洒落なフォントです。はてなブログの人気テーマ「DUDE」にも採用されているフォントですね。

Nothing You Could Do

 

Shadows Into Light

f:id:mono_kuro:20170117231356p:plain

少し抜けた感じのある手書き風フォントです。個人的には好きなフォントですね。

Shadows Into Light

 

Handlee

f:id:mono_kuro:20170117231304p:plain

手書き風フォントの中でも見やすさを重視したフォントですね。優等生感が出ています。

Handlee

 

Amatic SC

f:id:mono_kuro:20170117231208p:plain

独特の雰囲気があるお洒落な手書き風のフォントです。ワンポイントで利用したいですね。

Amatic SC

 

Kaushan Script

f:id:mono_kuro:20170117231219p:plain

サインペンで書いたような躍動感があるフォントです。

Kaushan Script

 

Pacifico

f:id:mono_kuro:20170117231230p:plain

筆記体のような書体が美しいフォントです。ロゴマークにも使えそうですね。

Pacifico

 

Satisfy

f:id:mono_kuro:20170117231329p:plain

筆記体フォントその2。手書き感が増していますね。

Satisfy

 

Cabin Sketch

f:id:mono_kuro:20170117230824p:plain

鉛筆でがりがりと書いたような味のあるフォントです。大きめのサイズで使用したいですね。

Cabin Sketch

 

Googleフォントの導入方法解説

ここからは実際にGoogleフォントを導入する方法について解説します。導入の流れは以下の通りです。

  1. Googleフォントにアクセスする。
  2. Googleフォントのページで、使いたいフォントをコレクションに追加する。
  3. 選んだフォントの詳細情報を確認する。
  4. 自分のWebページへコードをコピペする。
  5. フォントを使用したい箇所にコードをコピペする。

上記の手順を踏むことで、Googleフォントを利用することが可能となります。それでは、それぞれについて詳しく解説していきましょう。 

 

Googleフォント導入手順

Googleフォントにアクセスする

まずはGoogleフォントのWebサイト(Google Fonts)にアクセスします。

 

使用したいフォントをコレクションに追加する

次に導入したいフォントをコレクションに追加しましょう。

すでに使用したいフォントが決まっている場合は右上の検索ボックスにフォント名を入力して検索します。

f:id:mono_kuro:20170118214715p:plain

 

今回は例として「Dosis」を導入してみたいと思います。

検索ボックスに「Dosis」と入力すると、対象のフォントが表示されました。

f:id:mono_kuro:20170118214817p:plain

コレクションに追加するにはフォント名の横にある「+」ボタンをクリックしてください。

コレクションに追加できると、画面の下に以下のように表示されます。

f:id:mono_kuro:20170118214919p:plain

 

選んだフォントの詳細情報を確認する

次に選択したフォントの詳細情報を確認し、使用したい設定を選択します。

「CUSOMIZE」を選択すると、使用する設定を選択することができます。

基本的には初めから選択されているものだけで大丈夫です。

f:id:mono_kuro:20170118215414p:plain

 

WebページにGoogleフォントを導入する

ここまでの設定が終わったら、いよいよWebページにGoogleフォントを導入していきます。

導入といってもコードをコピペするだけなのでとても簡単ですね。

「EMBED」のタブをクリックするとコードが表示されていると思います。

この中のEmned Fontの下のボックスに自動的に表示されているコードを自分のサイトやブログにコピペしてください。

その際、「STANDARD」の場合はHTMLに、「@IMPORT」の場合はCSSにコピペしてください。

f:id:mono_kuro:20170118215655p:plain

 

はてなブログの場合は、STANDARDなら「ダッシュボード>設定>詳細設定>検索エンジン最適化」と進み、「headに要素を追加」のボックスにこのコードをコピペすれば大丈夫です。

f:id:mono_kuro:20170118215927p:plain

 

@IMPORTなら「ダッシュボード>デザイン>カスタマイズ>デザインCSS」にコピペすれば大丈夫です。

これら2つのコードを両方貼り付ける必要はなく、どちらかの方法でコピペすればOKです。私はわかりやすいので「STANDRAD」の方法を使用しています。

 

CSSファイルにコードをコピペする

最後は自分のWebページのcssファイルにフォントのコードをコピペすれば導入は完了です。

コピペするコードはSpecify in CSSの下のボックスに表示されているコードです。

f:id:mono_kuro:20170118220036p:plain

 

はてなブログの場合は「ダッシュボード>デザイン>カスタマイズ>デザインcss」に以下のようにコードをコピペすればOKです。

本文のフォントを変更する場合は以下のコードをコピペします。

body{
  font-family: 'Dosis', sans-serif;
}

タイトルのフォントを変更する場合は以下のコードをコピペします。

#title{
  font-family: 'Dosis', sans-serif;
}

 

これでGoogleフォントの導入は完了となります。実際に表示されているか確かめてみましょう。

上記の例は「Dosis」を導入する際のコードとなるので、「Dosis」の部分を自分が使用するGoogleフォントの名前に変更すればOKです。

 

Googleフォントでフォントを探す便利な方法

実際にGoogleフォントを導入しよう!と思っても、今回ご紹介したフォント以外にも様々なフォントがあるため、どれがいいか迷ってしまうと思います。

そんな時に便利な機能がGoogleフォントのフォント比較機能です。

これは自分の好きな文字を入力して、実際に実装した場合の見た目を複数のフォントで比較できるというものです。

これを利用することでフォント選びがとても効率良く行えるようになります。利用手順は以下の通りです。

全てのフォントを指定した文字に変更する方法

Googleフォントのトップページへアクセスする

まずはGoogleフォントのWebサイト(Google Fonts)にアクセスします。

 

フォントを選択し、例文を入力する

実はトップページに表示されている各フォントの例文は自由に編集することが可能です。

ひとつフォントを選択して例文を変更してみましょう。

f:id:mono_kuro:20170118224825p:plain

 

「APPLY TO ALL」をクリックする

例文を入力すると、選択したフォントでどのように表示されるか確認することができます。

この画面で例文の下に表示されている「APPLY TO ALL FONTS」をクリックしてください。

f:id:mono_kuro:20170118225123p:plain

 

すると、表示されている全てのフォントの例文が入力した例文に変更されます。

f:id:mono_kuro:20170118225252p:plain

これなら、実際に実装されたイメージを確認しながらフォントを見つけるのも簡単に行えますよね。

 

選択したフォントを指定した文字に変更する方法

気に入ったフォントを追加する

フォントを一覧で確認し、気になったフォントがあればフォント名の右に表示されている「+」ボタンをクリックしてストックしておきましょう。

f:id:mono_kuro:20170118225252p:plain

 

「→」ボタンをクリックする

いくつか気になるフォントのストックが溜まったら、下画面の「Families Selected」をクリックしてましょう。

選択したフォント名が表示されているのを確認したら右上にある矢印マークをクリックします。

f:id:mono_kuro:20170118225449p:plain

 

例文を入力する

矢印マークをクリックすると以下のように選択したフォントが一覧で表示されます。

ここで「Type here to preview text」のボックスに例文を入力します。

f:id:mono_kuro:20170118225819p:plain

  

すると、選択したフォントで表示された例文が並んで表示されます。

f:id:mono_kuro:20170118230111p:plain

これならいくつか気になったフォントの中から一番しっくりくるものを選択しやすくなりますね。

フォントごとの微妙な違いを比較するのにも役立ちます。

 

あとがき

Googleフォントのおすすめの紹介とGoogeフォントの導入方法についての解説でした。

フォントを変更するだけでブログの印象を大きく変えることができるので、こだわりたいポイントですね。

Googleフォントは使い方も簡単ですので、よろしければ導入してみてください。

参考になれば幸いです。

 

関連記事