デザイン

googleフォントの使い方とおすすめフォント17選【本文・タイトル向けなど】

googleフォント って何?どうやって使うの?
googleフォント を使いたいけど、量が多くてどれを選んでいいかわからない。
おすすめフォントはないですか?

という方向けの記事です。

近年、webサイトを制作する際、webフォント を使うことも出てきました。

画像の代わりにできるだけwebフォントを使うと、

・スマートフォン閲覧の際にズームしてもあれない

・どのwebブラウザでも同じフォント で閲覧できる

・プログラム上はテキストなので、SEO的にもよい

というメリットがあります。

 

その中でも、googleフォントは無料で使いやすく便利です。

詳しくご紹介します。

googleフォントの使い方とおすすめフォント17選【本文・タイトル向けなど】

googleFontsとは

googleFonts はGoogleから提供されている無料のフォントサービスです。

英字のものが多いですが(数百種類はある)、日本語版も出ています。

使用も簡単で、必要なコードをwebページに入力するだけで誰でも簡単に使うことができます。

webフォント使用時に、料金や使用サイトの登録が不要な点も特徴です。

Google Fonts

wordpressの場合「Easy Google Fonts」というwordpressプラグインで、簡単に使用することも可能です。

Easy Google Fonts

Googleフォント の使い方

1.GoogleFontsのサイトに移動して、使いたいフォントを選択。各フォント右上の+ボタンを押す。

GoogleFonts

右側のCategoriesは

・Serif(明朝体)

・SansSerif(ゴシック体)

・Display(装飾書体)

・Handwriting(手書き風書体)

・Monospace(等幅書体)

です。

2.ポップアップで下からウィンドウが出てくるので、使いたいサイトのhtmlやphpソースの<head>内に赤枠部分のコードを入れる。

2.CSS部分の使いたい箇所に(段落や見出し、ナビゲーションなど)以下の赤枠部分のコードを入れる。

記入例:

p{

font-familly:’Open Sans’, sans-serif;

font-size:18px;

}

IllustratorやPhotoshopでも使える

Googleフォント というとwebサイトに読み込んで使うWebフォントのイメージが強いですが、PCにもインストールできます。

ただ、商標登録用のロゴなどには使えないそうです。ご注意を。

フォントのダウンロード方法

1.GoogleFontsサイトに移動して、使いたいフォントを選択。各フォント右上の+ボタンを押す。

GoogleFonts

2.右上ダウンロードボタンをクリックし、フォントをダウンロードする。

3.ダウンロードしたzipファイルを解凍。(Macの場合はダブルクリックで解凍)

フォントファイル(ttfファイル)をPCにインストールする。(Macの場合、ファイルのダブルクリックでFontbookが起動)

4.IllustratorやPhotoshopなどソフトで使用する。

おすすめGoogleフォント17選

サイトを見てみるとほんとたくさんのフォントがありますね。

その中でおすすめフォントをいくつか選んでみました。

参考になれば幸いです。

日本語フォント

Noto Sans JP/ゴシック/本文向き

Noto Sans JP/Regular

以前までは、googleの日本語フォント は表示が遅いと感じていたのですが、サイトに組み込んで、先日試したところ、とても表示が速くなっていました。(2018年9月より公式サポート)

実装できるレベルと判断して仕事でも組み込んでいます。
癖が少なく使いやすいフォントです。

ウェイトは6種類です。

Noto Sans JP

Noto Serif JP/明朝体/本文向き

Noto Serif JP/Regular

明朝体はデフォルトフォントの場合、綺麗に安定して表示させるのが、難しいときもあったのですが、こちらは綺麗で大変便利。

ウェイトは7種類です。

Noto Serif JP

英語フォント

Open Sans/ゴシック/本文向き

Open Sans/Regular

Italic系も含め、ウエイトが10種類もあって使いやすい。

本文にも使える癖のない綺麗なフォント。

Open Sans

Roboto/ゴシック/本文向き

Roboto/Regular

Italic系も含め、ウエイトが12種類もあって使いやすい。

こちらも本文にも使える癖のない綺麗なフォント。

細字系書体「Roboto Condensed」や等幅フォント「Roboto Mono」もある。

Roboto

Playfair Display/明朝系/本文向き

Playfair Display/Regular

Italic系も含め、ウエイトは6種類。

小文字も大文字と同じ形スモールキャピタル系書体「Playfair Display SC」もある。

Playfair Display

Dosis/ゴシック系/モダン・シンプル

Dosis/Regular

tやfの表現が特徴的なフォント。

モダンな印象にしたいときよさそう。Extra-boldがかわいい。

Dosis

Quicksand/ゴシック系/モダン・シンプル

Quicksand/Regular

丸っこい感じの書体です。lightが品良く使いやすそう。

Quicksand

Abril Fatface/明朝系/モダン・タイトル向け

Abril Fatface/Regular

ウエイト1 種類のモダンなフォント。

文字の太さが特徴的なので、本文向きではないです。

Abril Fatface

Amatic SC/手書き風/モダン・タイトル向け

Amatic SC/bold

ひょろっとした手書き風の書体。

「BOTANIST」というボタニカルシャンプーのロゴ文字に似ていると思う。

Amatic SC

EB Garamond/明朝系/本文向き

EB Garamond/Regular

italic系書体も含めて10書体とウエイトが多くて使いやすい。

本文に使ってもバランスがいい書体。

EB Garamond

Bellefair/明朝系/エレガント・タイトル向け

Bellefair/Regular

ウエイトが1つしかないのがもったいないくらい。

サイトが上品に仕上がるフォント。

大文字がきれいで「Trajan」に似ていると思う。

Bellefair

Monoton/ゴシック系/モダン・タイトル向け

Monoton/Regular

装飾されていて印象が強いフォント。

タイトルのイメージづくりに。

Monoton

Passion One/ゴシック系/カジュアル・ウエイト重め

Passion One/Regular

ウエイトは3書体。(Regular、Bold、Black)

太めのフォントを探しているなら、使いやすそうなフォント。

Passion One

Caveat/手書き風/カジュアル・タイトル向け

Caveat/Regular

ノートにサインペンで書いた感じの手書き風。

さらっと書いておきたい時に便利。女性ターゲットのサイトにもよさそう。

Caveat

Black Ops One/装飾系/カジュアル・タイトル向け

Black Ops One/Regular

ロボット・アーミー系。

いつか使ってみたい。

Black Ops One

Ribeye Marrow/装飾系/カジュアル・タイトル向け

Ribeye Marrow/Regular

飲食店や美容室など需要がありそうなフォント。

Ribeye Marrow

まとめ

まとめると、GoogleFontsは、

・Google社が運営しているフォントサービス

・サイトに必要なコードを読み込むだけですぐに使える(wordpressはプラグインもあり)

・WebサイトだけではなくPCにフォント をダウンロードし、印刷物でも使える

でした。

日本語フォントもサポートが開始されてよりGoogleフォントが使いやすくなりそうですね。

また、仕事で使っている手持ちのおすすめ日本語フォント(有償・フリー)については以下にまとめています。

あわせて読みたい
日本語フォントおすすめ12選[デザイナーの私が使っているもの/有償・フリー] 日本語のフォントを探しているんだけど、おすすめが知りたい。 デザインの仕事で使いやすいフォントを探している。 という...

参考になれば幸いです。