【図で解説】Googleフォントを無料で簡単にサイトに実装する方法・使い方

「サイトの文字をおしゃれにしたい」「もっと読みやすいフォントに変えたい」 そんなときに便利なのが、Google Fonts（グーグルフォント）です。

今回は、無料で使えて設定もとっても簡単なGoogleフォントを、皆さんのWebサイトに導入する方法・使い方・設定方法を解説します。 CSSの挿入が可能であれば、どんなサイトでも基本的に実装可能です。

ステップ①：Google Fontsからフォントを選ぶ

まずは、以下の公式サイトにアクセスします：

👉 https://fonts.google.com/

• 検索バーに「Japanese」で絞り込むと、日本語対応しているフォントのみを表示することが可能になります。
• 好きなフォントが見つかったら、クリック
• 「Get Font」をクリックして「Get embed code」をクリックします

たとえば以下のようなコードになります：

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');

↑ @import をクリックして、内容をコピーしておきます。 

ステップ②：CSSに貼り付ける

次に皆さんのサイトのCSS（スタイルシート）に、さきほどのコードを上の方に貼り付けましょう。
たとえばKajabiであれば、ページ作成画面の「Settings」 > 「Custom Code」 > 「CSS Code」に記述できます。

WordPressなどであれば、 カスタマイズ > 追加 CSSから可能です。

ステップ③：フォントを適用する

次に、どの部分の文字にフォントを適用するかを指定します。

初心者の方は、以下のように「すべての文字要素」にフォントを適用するのが簡単です👇

/* Googleフォントを全体に適用 */
*, h1, h2, h3, h4, h5, h6, a.btn, .block, input::placeholder, textarea::placeholder {
 font-family: 'Noto Sans JP', sans-serif;
}

 'Noto Sans JP' の部分は、皆さんが選んだフォント名に変更してください。

sans-serif は、フォントが読み込めなかった時の代替フォントです。

実際に使えるCSSまとめ

/* Googleフォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');

/* フォント適用 */
*, h1, h2, h3, h4, h5, h6, a.btn, .block, input::placeholder, textarea::placeholder {
 font-family: 'Noto Sans JP', sans-serif;
}

Googleフォントに関するよくある質問（FAQ）

Q1. Googleフォントを使うとサイトが重くなりませんか？
A.フォントファイルを外部（Googleのサーバー）から読み込むため、多少の読み込み時間は発生しますが、Googleのサーバーは高速かつ安定しているので、基本的には大きな問題はありません。
ただし、複数のフォントやウエイト（太さ）を読み込みすぎると表示が遅くなる原因になるので、必要なものだけを選ぶようにしましょう。

Q2. GoogleフォントはSEOに影響しますか？
A.直接的にSEOに悪影響を与えることはほとんどありません。ただし、サイト表示速度が極端に遅くなると、間接的にSEOに影響する可能性はあります。
そのため、読み込むフォントを絞ったり、「display=swap」オプションを使って、読み込み中でも文字が表示されるようにするとより良いです。

Q3. Googleフォントは商用利用しても大丈夫？
A. はい、すべてのGoogleフォントは商用利用OKです。ライセンスは「SIL Open Font License（OFL）」に基づいており、商用サイトやクライアント案件でも安心して使えます。

もちろんKAJABIのサイトでもGoogleフォントを設定することが可能です。フォントを変えるだけで、サイトの雰囲気をガラッと変更することができるので、是非KAJABIをお使いの場合はGoogleフォントを使ってみてください。 細かい設定方法などについては、日本語ガイドの方でご紹介をしています。