Googleフォントは商用利用できる？無料でサイトに入れる方法【図で解説】

こんにちは！Hodaです。

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

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

Googleフォントは商用利用できる？無料で使って大丈夫？

Google Fontsで公開されているフォントは、個人利用だけでなく商用利用も可能です。

Google公式でも、Google Fontsのフォントはオープンソースライセンスで提供されており*商用・非商用を問わず利用できると案内されています。

そのため、たとえば次のような用途でも基本的に利用できます。

• 会社・店舗のWebサイト
• オンラインショップ
• Kajabiなどで作成した販売ページ
• クライアント向けに制作するWebサイト
• ロゴやバナーなどのデザイン
• アプリ
• 電子書籍や教材
• 印刷物やパッケージ

フォントごとにライセンスは異なる

ただし、ひとつ注意したいのが、すべてのGoogleフォントが同じライセンスというわけではない点です。

Google Fontsでは「SIL Open Font License（OFL）」が最も一般的ですが、一部にはApache LicenseやUbuntu Font Licenseなど、別のオープンソースライセンスが使われているフォントもあります。 

通常のWebサイトや商用デザインで利用する分には大きな問題になることはほとんどありませんが、

• フォントファイル自体を配布する
• フォントを改変して再配布する
• テンプレートやアプリにフォントファイルを同梱する

といった使い方をする場合は、各フォントのライセンス条件も確認しておきましょう。

Google Fontsの各フォントページからライセンスを確認することができます。

WebサイトでGoogle Fontsを読み込んで文字として使用するだけであれば、通常は追加料金を支払う必要もありません。ここはさすがGoogle様という感じですね！

次に、使い方をご紹介します。

ステップ①：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 Fontsで公開されているフォントはオープンソースライセンスで提供されており、商用サイトやクライアント案件でも利用できます。 多くのフォントは「SIL Open Font License（OFL）」ですが、一部にはApache LicenseやUbuntu Font Licenseなどもあります。通常のWebサイトで使用する場合は基本的に問題ありませんが、フォントファイルを再配布・改変する場合などは、各フォントのライセンスも確認しておきましょう。

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