コピペでOK！オシャレなフォントが無料で使えるGoogle Fontsの導入方法

せっかくの個人サイト、見た目にこだわって自分好みにカスタマイズしたいという方は多いはず。フォントを変更するというのも、サイトを好みの見た目にするのに有効な手段のひとつです。

しかし通常、オシャレなフォントを使おうとすると、フォントを購入する必要があったりして何らかの費用がかかる場合が多く、趣味で運営しているサイトには少しハードルが高いです。

そこでオススメしたいのが、Google社が提供しているGoogle Fontsというサービス。

Browse Fonts - Google Fonts

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

Google Fontsは、だれでもWeb上でオシャレなフォントを無料で使うことができるサービスです。しかも会員登録なども不要で、コードをコピー＆ペーストするだけで導入できるというお手軽さ。

少し前までは日本語フォントの種類が少ないという難点があったのですが、最近は日本語フォントの種類もかなり充実してきて、とても使いやすくなっています。

サイトにオリジナリティを出したい、オシャレなフォントを使いたい！という方はぜひ参考にしてください。

使いたいフォントを選ぶ

Google Fontsにアクセスすると、次のような画面が出てきます。（※Google FontsのUIの変更により細部が異なる場合があります）

Google Fontsでは、日本語フォントだけでなく、その他の言語のフォントも多数提供されています。例文が英語のものは英語対応、例文が日本語のものは日本語対応フォントです。そのため、日本語で利用するつもりなのにうっかり日本語に対応していないフォントを選んでしまった、ということのないように気を付けてフォントを選びましょう。

フォントの絞り込み方

画面上部にある「Filter」ボタンをクリックすると、左側のサイドバーが開きます。

ここから使いたいフォントを絞り込んで探すことができます。左上のツールから順番に、ひとつずつ説明します。

Preview

Type somethingと書かれたテキストボックスに好きな文章を打ち込むと、その文章がそれぞれのフォントでどのように見えるかがプレビューされます。日本語の文章を打ち込むと、日本語対応フォント以外では正しくプレビューされないことがあるのでご注意ください。

Language

フォントの対応する言語から絞り込めます。日本語対応フォントは「Japanese」で絞り込めます。

Technology

フォントの特色から絞り込めます。
Variableをクリックしてオンにすると、可変フォントのみを表示できます。可変フォントとは、フォントの太さやイタリック体などのスタイルに、ひとつのフォントファイルで対応しているフォントのことです。
Colorをクリックしてオンにすると、色のついたフォントを絞り込めます。

Decorative stroke

フォントのストロークの装飾に関して、種類を絞り込めます。

Serif…明朝体のような見た目のフォント。縦線が太く横線が細く、はねやはらいに似た装飾があるもののことです。
Slab Serif…Serif体と似ていますが、はねやはらいのような装飾がより大きくはっきりとしたフォントです。
Sans Serif…ゴシック体のような見た目のフォント。線幅が均一で装飾のないものを指します。

Classification

フォントの雰囲気の分類から絞り込めます。

Display…見出しに適したフォント。デザインが凝っていて目を惹くものが多いです
Handwriting…手書き風のフォント。英語フォントでは筆記体風のものが多いです
Monospace…等幅フォント。一文字ずつの幅がすべて等しいフォント
Not text…文字ではないフォント。絵文字やアイコン、バーコード、ミミズのような読めない文字まで遊び心たっぷりの面白いフォントが出てきます

Properties

「Number of styles」と書かれたバーを左右に動かすと、線幅の太さやイタリック体などバージョン違いのフォントの数で絞り込めます。

Sort by

フォントの表示順をソートできます。Trendingは最近の人気順、Most Popularは全期間の人気順、Newestは新旧順、そしてNameは名前順です。

使いたいフォントが決まったら……

これだ！と思ったフォントを見つけたら、そのフォントをクリックします。今回は例としてKiwi Maruを選んでみます。するとフォント個別のページにジャンプします。

右上に「Get font」と書かれた青いボタンがあるので、クリックします。

すると次のような画面になります。使いたいフォントをすべて選んであるなら「Get embed code」をクリックします。他にも使いたいフォントがあれば、先ほどの画面に戻って使いたいフォントを追加します。

Get embed codeをクリックすると、フォントをWEBサイトで使うために必要なコードが出てきます。上側のボックスに書かれているのがフォント読み込み用のコード、下側のボックスに書かれているのはCSSに記述するフォント適用のためのコードです。

初期状態ではフォントを読み込むためのコードが、HTMLコードで表示されています。しかしHTMLコードを使うと、フォントを使いたいすべてのHTMLファイルにコードを書き足す必要があるため、非常に手間がかかります。そこで、CSSファイルに読み込み用コードを記述することで、CSSファイルを読み込んでいるすべてのHTMLでフォントを使えるようにします。

ピンク色で示した部分にふたつのラジオボタンがありますので、「@import」と書かれているほうにチェックを入れてみましょう。

するとCSSに記述するコードが表示されました。１行目の<style>および最後の</style>部分は不要です。@import url...と書かれた行のみをコピーし、お使いのCSSファイルの最初の方にペーストしましょう。これでフォントを読み込むことができます。

さらに下側のボックスにはfont-family:...から始まるCSSコードがあります。これをお使いのCSSファイルのフォントを適用したい要素に適用すれば、フォントを変更することができます。

CSSに変更を加えてもフォントがうまく反映されない場合は、ブラウザのキャッシュをクリアしてみましょう。それでも反映されない場合は、下記の記事をご確認ください。

CSSの変更がブラウザで反映されないときにチェックすべきこと

CSSを変更したのに、サイトに上手く反映されないときにチェックすべき項目を紹介します。（１）ブラウザにキャッシュが残っていないか、（２）CSSの文法は正しいか、（３）CSSの優先度は正しいか、（４）レスポンシブ対応の記述になっていないか。具体的なチェック方法に加え、必殺技ツールも紹介しています。

英字フォントと日本語フォントを同じ要素で併用したい場合

オシャレな英字フォントを使いたいけど、フォントを適用したい部分に日本語も混ざってる……という場合は、アルファベット部分では英字フォントを優先させて、日本語部分では日本語フォントを代用させることもできます。

例えば「英字部分はLobster two、日本語部分はNoto Sans Japaneseを使いたい！」という場合は、以下のようにCSSを記述しましょう。

font-family: 'Lobster Two', 'Noto Sans JP', cursive;

先に書かれたフォントが優先されるので、英字フォントを最初に記述し、そのあとに日本語フォントを記述します。最後に、もしもどちらのフォントも読み込めなかったときのために、標準フォントを記述します（おまじないだと思ってください）。これで英字部分はLobster Twoが、日本語部分にはNoto Sans Japaneseが適用されるようになります。