Google Fontsで日本語のWebフォントを使用する

• Webクリエイター 古川 徹朗
• 2018-05-23T08:00:26+00:00

前回「5分でできる！Google Fontsを利用したWebフォント利用法」ではGoogle Fontsを利用してWebフォントを利用する方法を紹介しました。しかしGoogle Fontsは欧文フォント中心で日本語には使用できません。
今回紹介する、「Google Fonts + 日本語早期アクセス」は9種類の日本語書体から選んでWebフォントに使用できるサイトです。日本語フォントは欧文フォントと比べて、ひらがな、かたかな、漢字と文字の種類が多く、欧文フォントに比べてどうしても書体数が少なくなってしまいます。中には汎用的に使用できる使いやすいフォントもあるので、活用しください。

選べる9種類の日本語フォント

「Google Fonts + 日本語早期アクセス」では以下の9つのフォントを使用できます。

• M+ 1p
• Rounded M+ 1c
• はんなり明朝
• こころ明朝
• さわらび明朝
• さわらびゴシック
• ニクキュウ
• ニコモジ
• Noto Sans Japanese

この中に以下の3つのフォントを漢字にも対応し、ウェイトも選ぶことが可能です。

• M+ 1p
• Rounded M+ 1c
• Noto Sans Japanese

以下の二つは漢字には対応していますがウェイトのバリエーションはありません。

• さわらび明朝
• さわらびゴシック

以下の4つは漢字にもウェイトのバリエーションにも対応していませんが、非常に構成的なフォントなので使いどころは選びますが、ここぞという時に使うとデザインに個性をだせます。

• はんなり明朝
• こころ明朝
• ニクキュウ
• ニコモジ

日本語フォントをWebフォントに設定する

設定方法はGoogle Fonts同様非常に簡単です。
まず使用したいフォントのHTMLの箇所にあるタグをhead内に記載します。
次にCSSの箇所にスタイルを参考にWebフォントを使用したい箇所に指定します。

ウェイトの指定方法

上記に記載した3つのフォントはウェイトの指定が可能です。
7つのウェイトは以下のように指定できます。

//Thin
font-weight: 100;

//Light
font-weight: 300;

//Regular
font-weight: 400;

//Medium
font-weight: 500;

//Bold
font-weight: 700;

//Extrabold
font-weight: 800;

//Black
font-weight: 900;

設定は以上です。

日本語のWebフォントも非常に簡単に使用できますが、フォントによっては表示できない漢字があります。日本語フォントを選定する場合はどういう文字を表示するのかも意識して選定してください。

通常版を見る