Google Fonts（グーグルフォント）とは

Googleが提供している無料のWebフォントライブラリ。世界中のデザイナーが制作したオープンソースフォントを集めたサービスで、誰でも自由に利用できます。
Web制作の「環境によってフォントが変わる」「デザインが崩れる」といった問題を解決してくれるため、Web制作には欠かせないフォントの一つです。

主な機能・特徴

無料で利用可能	すべてのフォントが無料、商用利用もOK
Webフォントとして読み込み可能	HTMLやCSSに数行のコードを追加するだけで利用可
ダウンロード可能	PCにインストールしてIllustratorやWordでも利用可能
豊富なラインナップ	英語、日本語をはじめ、世界中の言語に対応
豊富な絞り込み機能	明朝体系、ゴシック体系、手書き風など用途に合わせて検索可能
プレビュー機能	好きな文字を入力し表示をリアルタイムで確認可能

Googleフォントの使い方

ログイン不要で、Googleアカウントがなくてもだれでも利用可能です！

①「Filters」をクリックしてフォントを絞り込みむ

「Language」を「Japanese」にすれば日本語対応フォントを見る事ができます。言語以外にもフォントのスタイルも細かくフィルタリング可能。（日本語など対応しているスタイルがないときは残念な顔文字が表示されます）
また、Preview欄を使えば任意の文字列でフォントの見た目を確認できます。

②フォントを選択

表示されているフォントをクリックすると詳細が確認できます。スタイルや太さのバリエーション、使用例などが見られます。
気に入ったら「Get Font」から取得方法を選択しに行きます。

③Webフォント、またはダウンロードして使うかを選択

◆ Webフォントとして使う場合は「Get embed code」をクリック
コードがコピーできるので、htmlは指定の場所、CSSは任意の場所に貼り付け使用します。
※詳細は下記参照

◆ ダウンロードして使う場合は「Download all」をクリック
zipファイルがダウンロードされるので、フォントをPCにインストール後、各種ツールで使用可能になります。
※詳細は下記参照

Webフォントとして使う方法

①フォントの太さ、スタイルを選択

「Get embed code」をクリック後、フォントの太さ、スタイルを選択できます。

バリアブルフォント（可変フォント）と呼ばれる、太さ（wght）や幅（wdth）、斜体（ital）などが調整できるフォントの場合は、「Full axis」または「One value」を選択。
特に理由がなければ、「Full axis」を選択することをおすすめします。

• 「Full axis」
  選択したフォントが持つすべての軸（太さ、斜体など）のすべての範囲を読み込みます。そのため、後からCSSで太さの値を自由に変更したり、アニメーションで滑らかな変化をつけたり柔軟な対応が可能です。ただし、読み込むファイルが大きく、表示速度がおそくなる可能性があります

• 「One value」
  特定の1つの値（例：Regular 400）のみを読み込みます。ファイルのサイズが最小限になり、ページの表示速度が向上します。将来的な変更がないとわかっている場合にオススメ！

One valueで2つ以上の太さ・スタイルを使いたいときは？

下記のように、コピーできるコードの該当箇所に追記を行います。
（例：「Regular 400」と「Bold 700」を使いたい場合）

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

②指定方法の選択

Google Fontsでは、「linkタグ」で指定する方法と「@importルール」で指定する方法の2つがあります。
どちらもHTMLファイルのheadタグ内に指定のコードをはりつけ、CSSは任意でカスタムして使います。
特別な理由がない限り「linkタグ」を使うことをおすすめします。

linkタグ

読み込みが早く、SEOの観点からも推奨されています。
特別な理由がない限りこちらを使うことをおすすめします。

@importルール

複数のCSSファイルを統合する際に便利ですが、読み込み速度が遅くなる傾向があります。

③使用開始

HTMLコードはheadタグ内の指定の場所にはりつけ、CSSは任意でカスタムして使います。

ダウンロードとして使う方法

①フォントのダウンロード

「Download all」をクリック後、zipファイルがダウンロードされるのでフォントをPCにインストールします。

• Windowsの場合
  解凍したファイルの中にある拡張子が「.ttf」や「.otf」のフォントファイルをダブルクリックし、表示されたダイアログの「インストール」をクリックします。
  または、エクスプローラーで「fonts」を開いて、解凍したフォントファイルをドラッグ＆ドロップしてもインストールできます。

• Macの場合
  解凍したフォントファイルをダブルクリックし、アプリケーション「Font Book」にフォントが追加されます。

※フォントが読み込まれない場合は、各種アプリケーションを再起移動するか、PC自体を再起動

日本語のフォントのサンプルをまとめたサイトも便利

Google Fontsに追加された新しい日本語のフォントのサンプルを利用できるサイトもあります。美しい日本語のフォントを探すのは大変なのでとても参考になるサイトです。
「Google Fonts + 日本語」について詳しく見る

活用例

• Webサイトの見出しや本文フォント
• ブログのデザイン改善
• 資料やプレゼン資料の装飾
• ロゴやバナー制作

利用規約

料金形態	無料
ファイル形式	Open Typeまたはttf
商用利用	OK
クレジット表記	不要
登録・ログイン	不要
規約の確認先	公式サイト

※掲載内容は変更される場合があります。必ず【公式サイト】で確認後、自己責任でご利用ください。

注意点

※フォントによって、個別で利用規約があることがあります。Googleフォントだけでなく各フォントの利用規約も確認が推奨されます。

※Webフォントは外部から読み込むため、フォントを多く使いすぎるとサイト表示が遅くなる可能性がります。特に日本語フォントはデータ量が大きいため、使いすぎるとパフォーマンスに影響が出るので注意が必要です。

※ブラウザやOSによって微妙な表示差が出ることもあります。