Google Fontsの使い方とおすすめ日本語フォント

Google Fontsは2010年にリリースしたGoogleが提供する、無料で利用可能なフォントのディレクトリーサービスです。Googleのサーバーからフォントデータを読み込んでWebページにフォントを表示できるWebフォントで世界各国で利用されています。

日本語フォントについて

日本語フォントを使用できることは便利なことですが、デメリットもありますので理解しておきましょう。日本語フォントは英語フォントより文字数が多いのでファイルサイズも大きくなります。英文フォントですとアルファベット・英数・記号合わせて100文字程度ですが、日本語はひらがな・カタカナ・英数・記号、漢字でJIS第1水準漢字だけでも2,965文字あります。表示速度の面でも日本語フォントを複数使用することは避けた方がよいでしょう。また、日本語フォントは太さ(ウエイト)が何種類か用意されてますが、全種類選択すると読み込み速度が遅くなるので注意が必要です。

Google Fontsへアクセス

まずはGoogle Fontsページにアクセスしましょう。Googleフォントはユーザー登録の必要がなく無料で利用することができます。

フォントを検索する

フォント検索はページ上部エリアの検索機能を使って目的のフォントを検索します。

日本語フォントを検索したい場合は、LanguagesのプルダウンメニューからJapaneseを選択します。

チェックを入れるとvariable fontsのみが表示されます。variable fontsとは1つのフォントファイルで文字の太さ(ウェイト)を可変できるフォントのことをいいます。日本語のvariable fontはありません。

フォントを選択する

目的のフォントをクリックすると、フォント詳細ページに遷移します。

使用したいフォントの右にある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フォントはダウンロードしてPCで使用することも可能です。ここではGoogleフォントのダウンロード方法を解説します。

フォントを選択する

Googleフォントにアクセスし、ダウンロードしたいフォントをクリックすると、フォント詳細ページに遷移します。

フォントをダウンロードする

ダウンロードしたいフォントの右にあるSelect this styleをクリックし、Download familyをクリックするとフォントをダウンロードします。

Google Fontsのライセンスについては、英文ですが以下のページに記載されてますのでご覧ください。

Googleフォントの日本語フォントは当初は6種類のみでしたが、現在では57書体(2022年4月現在)となっています。2021年にフォントワークス、2022年にはモリサワのユニバーサルフォントが提供され、使用できるフォントの幅も広がりました。Noto Sans JPを中心にWebサイトで使用している例も多く見かけますが、ゴシック体・明朝体の他にも特徴のあるデザインフォントがありますので用途によって使い分けしてみましょう。数ある日本語フォントからおすすめのGoogleフォントを紹介します。

Noto Sans JP

GoogleとAdobeが共同開発し、2014年にリリースされたオープンソースの日本語フォント。ウェイトは6種類

BIZ UDPGothic

モリサワの読みやすく使いやすいように設計されたユニバーサルデザインフォント。ウェイトは2種類

M PLUS 1p

フリーフォントで有名なM+ FONTSのWebフォント版。漢字は直線的で、仮名は丸みのあるドッシリとした日本語フォント。ウェイトは7種類

Kosugi

フォントサイズを変更しても読みやすいフォント。ウェイトは1種類

M PLUS Rounded 1c

M PLUS 1pフォントの丸ゴシック体。ウェイトは7種類

Kosugi Maru

Kosugiフォントの丸ゴシック体。ウェイトは1種類

Kiwi Maru

マメロンフォントをベースに文字側部分を少し丸めた加工したキウイ丸フォント。ウェイトは3種類

Dela Gothic One

横長でどっしりした太いゴシック体フォントのデラゴシック。ウェイトは1種類

DotGothic16

ドットで構成されたデジタル風デザインフォント。ウェイトは1種

Noto Serif Japanese

Noto Sans JPと同様の明朝体。ウェイトは7種類

BIZ UDPMincho

モリサワの読みやすく使いやすいように設計されたユニバーサルデザインフォント。ウェイトは1種類

Shippori Mincho

うっとりするような明朝体を目指して制作した、オールドスタイル明朝体。ウェイトは5種類

Hina Mincho

ひな明朝は古風でかわいらしく品のある雛人形をイメージした明朝体フォント。ウェイトは1種類

Klee One

鉛筆やペンなどを使って書いた手書き風文字のような印象を与える楷書系硬筆体フォント。ウェイトは2種類

Yomogi

極細で個性が強く、それでいて可読性の高い手書き風フォント。ウェイトは1種類

Yusei Magic

油性マジックで手書きしたようなデザインフォント。ウェイトは1種類

Hachi Maru Pop

70～80年代に流行った丸文字をイメージしたキュートな丸ゴシック体。ウェイトは1種類

New Tegomin

手書き明朝体フォント「テゴミン」の更新版。手書きのゆらぎ感と明朝体の整然とした佇まいを掛け合わせたフォントを目指し作成されたフォント。ウェイトは1種類

Kaisei Decol

解星デコールは右払いやハネに星(ドット)を配置した、やわらかいイメージのデザインフォント。ウェイトは3種

RocknRoll One

丸い点が特徴的なポップなデザインフォント。ウェイトは1種類

Reggae One

アプリやコミックでも使えそうなシャープでポップなデザインフォント。ウェイトは1種

Potta One

ゴシック体を崩したポップな筆文字風フォント。ウェイトは1種類

Stick

棒(スティック)のように直線で表現されたデザインフォント。ウェイトは1種

Train One

アウトラインの内側と外側のラインで形成されるゴシック系フォント。ウェイトは1種