【無料】日本語のオシャレなGoogleフォントを使う方法！

「配色」や「文字の大きさ」などのデザインの違いで大きく印象が変わるWEBサイト。

その印象を決める要素は他にもたくさんありますが、個人的には「フォント」がかなり重要な要素だと思っています。

明朝体を使えば落ち着いた感じになるし、ゴシック体を使えば力強い感じになるし、フォントを変えるだけで簡単に印象を変えることができます。

無料で使える日本語フォントはなかなかない

ただ、いざフォントを変えようと思っても、デフォルトで使える日本語フォントがなんだかダサい気がして、変えづらいんですよね。。

そこで、無料で使える日本語フォントを探してみるんですが、オシャレなフォントは有料のものばかりで、無料で使える日本語フォントはなかなか見つかりません。

無料で使える英語のフォントなら、Google Fonts（Googleフォント）にたくさんあるので、苦労しないんですが。。

…と、悩んでいる方も少なからずいるかと思いますが、少し前からGoogleが日本語フォントの提供を始めたのをご存知ですか？

せめて英語のフォントを変えようと、久しぶりに「Googleフォント」と検索した時に気づいたんですが、通常のGoogleフォントとは違うページが用意されていました。

完全にサポートされていないフォントを試験的に提供しているとのことですが、公式で提供されているものなので、試さずにはいられませんでした…！

その日本語のGoogleフォントですが、執筆時点では6種類提供されています。

6種類のフォントの中では「ニクキュウ」というフォントが1番存在感がありますね（笑）

では、ここからは、日本語のGoogleフォントの使い方をご紹介してみます。

日本語のGoogleフォントを提供しているサイトにアクセスし、左側に表示されているサンプルを確認しながら使いたいフォントを決めます。

画面右側の説明の下に、コードが2種類表示さているので、上のコードをすべてコピーします。途中で切れてますが、ダブルクリックするとすべて選択できます。

そのコピーしたコードを自分のサイトの「head要素」の中にペーストします。（WordPressを使っている方は、header.phpの中にあります）

▼こんな感じ。

<head>
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
</head>

もう一度、Googleフォントのサイトに戻り、次は、下のコードをコピーします。

そのコードをスタイルシート（style.cssなど）の任意の場所にペーストすれば、フォントが適用されます。

▼h1要素に適用する場合

h1 {
    font-family: "Hannari";
}

▼p要素に適用する場合

p {
    font-family: "Hannari";
}

▼すべての要素に適用する場合（サイト全体でそのフォントを使う場合はこの方法）

* {
    font-family: "Hannari";
}

▼すでに他のフォントがある場合は、このようにカンマで区切って先頭に追加します。

* {
    font-family: "Hannari", "Karla", Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

では、先程のGoogleフォントの適用前と適用後を確認してみましょう。

▼適用前

▼適用後

いかがでしたか？ガラッと感じが変わりますよね？

無料で使えるので、「今のサイトのデザインにも飽きてきたな〜」という方は、試してみてはいかがでしょうか？

以上、日本語のGoogleフォントの使い方の紹介でした！参考にしていただければ嬉しいです！

(｀･ω･´)ゞ