[2017年版]Google Fontsの使い方とおすすめ欧文フォント5選

Google Fonts

この記事ではWebフォントの代表格Google Fontsの使い方と、数多くあるフォントの中からおすすめのものをピックアップして紹介したいと思います。CSSを読み込むだけで利用できるので、デザインにワンポイント工夫を加えたい時にぜひ使ってみてください。

Making the web more beautiful, fast, and open through great typography

レスプンシブやSEOの観点からもおすすめ

一昔前はデザインされたテキストを使う場合は画像ファイルにすることが多かったのですが、最近ではWebフォントを使いCSSで見た目を整えることが一般的になっています。テキストファイルにしておくことで、マルチデバイスの対応やSEOなどにも相性がいいためです。

2017/6/22 追記:エックスサーバーでモリサワのWebフォントが使えるようになりました!

Google Fontsの使い方

フォントを選ぶ

Google Fonts

右のエリアから「フォントの種類」や「太さ」などから絞り込みながら検索できます。
「+マーク」を押すと、右下に選択したフォントが表示されます。

フォントの太さを選ぶ

Google Fonts

「customize」タブを押すとフォントの太さが表示されます。
使いたい太さにチェックを入れてください。

ウェイトは2〜3つまでにしておく

あまり多くのバリエーションを選ぶとCSS読み込みに時間がかかってしまいます。多くても3つほどにしておいた方がいいと思います。

CSSを記述する

Google Fonts

読み込み用のCSS、セレクタ用のCSSが表示されますので、コピーして自身のWebサイトに記述してください。

おすすめ書体

使い方がわかったところで、おすすめ書体を紹介したいと思います。

Montserrat

Montserrat

シンプルなデザインながら18もの太さの種類があるのでとても使いやすいです。人気書体の「Gotham」にも似ていますね。

Roboto

Roboto

Googleが作ったフォント。AndroidやChrome OSのデフォルト書体として使われているように、癖のないデザインになっています。

Lato

Lato

個人的に一番好きかも。どんなデザインにも合います。金沢21世紀美術館のWebサイトにも使われていますね。

Quicksand

Quicksand

丸っこくてかわいらしいです。

Hind

Hind

スタイリッシュで見出し・本文のどちらでも使いやすいです。

番外編:Google Fontsで使える日本語フォント

Google Fontsで使える日本語フォント

数は少ないですが日本語フォントも使えます。
明朝体はデバイスによって搭載されている書体がバラバラなので、きれいに表示させたいときはGoogle Fontsを使うのが良さそうです。

As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available fro...