ブログをカスタマイズする上で、とても重要なのが文字などのフォントです。
今回は手軽にフォントの変更ができて、なおかつお洒落なフォントが揃っている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
シンプルでオーソドックスなサンセリフ体のフォントです。どんな場面で使用してもしっくりきますね。
Noto Sans
サンセリフ体のシンプルなフォントです。スマートな印象があります。
Abel
細くてインテリ感が漂うお洒落なフォントです。こちらのフォントもどこでも使えそうですね。
→ Abel
Dosis
スタイリッシュさを極めたフォントです。文字ごとのバランスも良く綺麗にまとまっていますね。
→ Dosis
Play
レトロゲーム風のフォントですね。雰囲気があって好きです。
→ Play
Lora
英語で長文を書くときに使用したいスタイリッシュで綺麗なフォントです。
→ Lora
Nunito
丸みを帯びてポップな印象のあるサンセリフ体のフォントです。
→ Nunito
Bitter
シンプルでどこか親しみが持てるフォントですね。
→ Bitter
ロゴ風フォント
ロゴ風フォントはブログの顔となる部分、ヘッダーなどに利用すると効果的だと思います。
Josefin Slab
とにかくお洒落なフォントです。全体のバランスが良く、ロゴマークとして使用するとかっこういいですね。
Poiret One
当ブログのヘッダーやサイドバーで使用しているフォントです。細身でシンプルな印象と小文字のeなどの遊び心のバランスが抜群ですね。
Orbitron
各文字の丸部分が四角になっている面白いフォントです。メカニカルな雰囲気もありますね。
→ Orbitron
Unica One
キュートでありながら統一感があってバランスも取れている、ユニークで面白いフォントです。
Special Elite
個性的でありながら、美しさもある独特のフォントですね。
Geostar
中抜きが特徴の個性的なフォントです。個性的ですが、全体のバランスはとてもいいですね。
→ Geostar
Plaster
全ての文字に縦線が入っているユニークなフォントです。文章というよりは完全にタイトルなどのロゴ用ですね。
→ Plaster
手書き風フォント
手書きのような味わいのあるフォントです。ワンポイントで使用するとお洒落ですね。
Nothing You Could Do
まるでサインのような手書き感があるお洒落なフォントです。はてなブログの人気テーマ「DUDE」にも採用されているフォントですね。
Shadows Into Light
少し抜けた感じのある手書き風フォントです。個人的には好きなフォントですね。
Handlee
手書き風フォントの中でも見やすさを重視したフォントですね。優等生感が出ています。
→ Handlee
Amatic SC
独特の雰囲気があるお洒落な手書き風のフォントです。ワンポイントで利用したいですね。
Kaushan Script
サインペンで書いたような躍動感があるフォントです。
Pacifico
筆記体のような書体が美しいフォントです。ロゴマークにも使えそうですね。
→ Pacifico
Satisfy
筆記体フォントその2。手書き感が増していますね。
→ Satisfy
Cabin Sketch
鉛筆でがりがりと書いたような味のあるフォントです。大きめのサイズで使用したいですね。
Googleフォントの導入方法解説
ここからは実際にGoogleフォントを導入する方法について解説します。導入の流れは以下の通りです。
- Googleフォントにアクセスする。
- Googleフォントのページで、使いたいフォントをコレクションに追加する。
- 選んだフォントの詳細情報を確認する。
- 自分のWebページへコードをコピペする。
- フォントを使用したい箇所にコードをコピペする。
上記の手順を踏むことで、Googleフォントを利用することが可能となります。それでは、それぞれについて詳しく解説していきましょう。
Googleフォント導入手順
Googleフォントにアクセスする
まずはGoogleフォントのWebサイト（Google Fonts）にアクセスします。
使用したいフォントをコレクションに追加する
次に導入したいフォントをコレクションに追加しましょう。
すでに使用したいフォントが決まっている場合は右上の検索ボックスにフォント名を入力して検索します。
今回は例として「Dosis」を導入してみたいと思います。
検索ボックスに「Dosis」と入力すると、対象のフォントが表示されました。
コレクションに追加するにはフォント名の横にある「+」ボタンをクリックしてください。
コレクションに追加できると、画面の下に以下のように表示されます。
選んだフォントの詳細情報を確認する
次に選択したフォントの詳細情報を確認し、使用したい設定を選択します。
「CUSOMIZE」を選択すると、使用する設定を選択することができます。
基本的には初めから選択されているものだけで大丈夫です。
WebページにGoogleフォントを導入する
ここまでの設定が終わったら、いよいよWebページにGoogleフォントを導入していきます。
導入といってもコードをコピペするだけなのでとても簡単ですね。
「EMBED」のタブをクリックするとコードが表示されていると思います。
この中のEmned Fontの下のボックスに自動的に表示されているコードを自分のサイトやブログにコピペしてください。
その際、「STANDARD」の場合はHTMLに、「@IMPORT」の場合はCSSにコピペしてください。
はてなブログの場合は、STANDARDなら「ダッシュボード＞設定＞詳細設定＞検索エンジン最適化」と進み、「headに要素を追加」のボックスにこのコードをコピペすれば大丈夫です。
@IMPORTなら「ダッシュボード＞デザイン＞カスタマイズ＞デザインCSS」にコピペすれば大丈夫です。
これら2つのコードを両方貼り付ける必要はなく、どちらかの方法でコピペすればOKです。私はわかりやすいので「STANDRAD」の方法を使用しています。
CSSファイルにコードをコピペする
最後は自分のWebページのcssファイルにフォントのコードをコピペすれば導入は完了です。
コピペするコードはSpecify in CSSの下のボックスに表示されているコードです。
はてなブログの場合は「ダッシュボード＞デザイン＞カスタマイズ＞デザイン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）にアクセスします。
フォントを選択し、例文を入力する
実はトップページに表示されている各フォントの例文は自由に編集することが可能です。
ひとつフォントを選択して例文を変更してみましょう。
「APPLY TO ALL」をクリックする
例文を入力すると、選択したフォントでどのように表示されるか確認することができます。
この画面で例文の下に表示されている「APPLY TO ALL FONTS」をクリックしてください。
すると、表示されている全てのフォントの例文が入力した例文に変更されます。
これなら、実際に実装されたイメージを確認しながらフォントを見つけるのも簡単に行えますよね。
選択したフォントを指定した文字に変更する方法
気に入ったフォントを追加する
フォントを一覧で確認し、気になったフォントがあればフォント名の右に表示されている「+」ボタンをクリックしてストックしておきましょう。
「→」ボタンをクリックする
いくつか気になるフォントのストックが溜まったら、下画面の「Families Selected」をクリックしてましょう。
選択したフォント名が表示されているのを確認したら右上にある矢印マークをクリックします。
例文を入力する
矢印マークをクリックすると以下のように選択したフォントが一覧で表示されます。
ここで「Type here to preview text」のボックスに例文を入力します。
すると、選択したフォントで表示された例文が並んで表示されます。
これならいくつか気になったフォントの中から一番しっくりくるものを選択しやすくなりますね。
フォントごとの微妙な違いを比較するのにも役立ちます。
あとがき
Googleフォントのおすすめの紹介とGoogeフォントの導入方法についての解説でした。
フォントを変更するだけでブログの印象を大きく変えることができるので、こだわりたいポイントですね。
Googleフォントは使い方も簡単ですので、よろしければ導入してみてください。
参考になれば幸いです。
