【2021年版】Google Fontsの使い方とおすすめ日本語フォント


【2021年版】Google Fontsの使い方とおすすめ日本語フォント

Googleフォントとは
Google Fontsは2010年にリリースしたGoogleが提供する、無料で利用可能ななフォントのディレクトリーサービスです。Googleのサーバーからフォントデータを読み込んでWebページにフォントを表示できるWebフォントで世界各国で利用されています。
日本語フォントについて
日本語フォントを使用できることは便利なことですが、デメリットもありますので理解しておきましょう。 日本語フォントは英語フォントより文字数が多いのでファイルサイズも大きくなります。英文フォントですとアルファベット・英数・記号合わせて100文字程度ですが、日本語はひらがな・カタカナ・英数・記号、漢字でJIS第1水準漢字だけでも2,965文字あります。表示速度の面でも日本語フォントを複数使用することは避けた方がよいでしょう。また、日本語フォントは太さ(ウエイト)が何種類か用意されてますが、全種類選択すると読み込み速度が遅くなるので注意が必要です。
Googleフォントの使い方
Google Fontsへアクセス
フォントを検索する
フォント検索はページ上部エリアの検索機能を使って目的のフォントを検索します。

Serif | 明朝体 |
---|---|
Sans Serif | ゴシック体 |
Display | ディスプレイ・装飾書体 |
Handwriting |
手書き風書体 |
Monospace |
等幅書体(文字幅がすべて同じ) |
日本語フォントを検索したい場合は、LanguagesのプルダウンメニューからJapaneseを選択します。

Number of styles | 文字のスタイル数 |
---|---|
Thickness | 文字の太さ |
Slant | 文字の傾斜 |
Width |
文字の幅 |
チェックを入れるとvariable fontsのみが表示されます。variable fontsとは1つのフォントファイルで文字の太さ(ウェイト)を可変できるフォントのことをいいます。日本語のvariable fontはありません。

Trending | トレンド(流行)順 |
---|---|
Most popular | 人気順 |
Newest | 新着順 |
Name |
アルファベット順(フォント名) |
フォントを選択する
目的のフォントをクリックすると、フォント詳細ページに遷移します。

使用したいフォントの右にあるSelect this styleをクリックすると、右エリアのSelected familiesにフォントが追加されます。複数のフォント・スタイルを選択することもできます。

コードを貼り付ける
Selected families内にcssへのリンク・記述方法が表示されるので、linkの上段に表示されているコードをhead
内へ貼り付け、下段のfont-familyを反映させたいCSSに追加します。CSS内に記述する場合は@importをクリックして表示されたコードをコピペします。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
.font01{ font-family: 'Noto Sans JP', sans-serif; }
CSSから読み込ませる場合は@IMPORTに表示されるコードをコピーして貼り付けてください。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
以上で、比較的簡単にGoogleフォントをサイト・ブログに反映させることができます。英語フォントも数多く提供されているので自分のサイトに合うフォントを探してみてください。
Googleフォントのダウンロード方法
フォントを選択する
フォントをダウンロードする
ダウンロードしたいフォントの右にあるSelect this styleをクリックし、Download familyをクリックするとフォントをダウンロードします。

Google Fontsのライセンスについては、英文ですが以下のページに記載されてますのでご覧ください。
日本語のGoogleフォント
Noto Sans JP
Noto Serif JP
Sawarabi Gothic
Sawarabi Mincho
M PLUS 1p
M PLUS Rounded 1c
Kosugi
Kosugi Maru
Shippori Mincho
Shippori Mincho B1
Potta One
Hachi Maru Pop
Yusei Magic
RocknRoll One
Reggae One
Stick
DotGothic16
日本語フォントは比較的数が少ないので、比較しやすいですが、英語となると900種類以上の中からフォントを検索しなければなりません。そんな時はアナリティクスページで人気の高いフォントをチェックすることができます。
