WEBで商用利用も可能な日本語の無料フォント11個

今や当たり前のことですが、CSS3でWEBフォントが導入され、WEBサイトでのテキストの表示にユーザーのフォント環境に依存せず、意図通りのフォントが表示されるようになりました。

今回は、WEBで商用利用も可能な日本語の無料フォント11個についてご紹介します。

みんなの文字

みんなの文字は、「わかりやすさの基準づくり」を推進しているUCDA（一般社団法人ユニバーサルコミュニケーションデザイン協会）とフォントベンダーのイワタ、電通が共同で開発したフォントです。

ただ美しいだけではなく、小さな文字、長文、低解像度、英数字の見分けのつきやすさ、かすれなどの劣化時、老眼・老眼・白内障・高齢の方など、あらゆる条件化でも読みやすいよう設計されています。

線は直線的な等幅で、ふところが大きいことで小さな文字でも潰れづらく、余計な装飾のないくっきりとした字形となっており、認定シールタグとWEB フォントタグをHTML、CSS に設置することで使用可能です。

Noto Sans JP

世界中の言語をサポートすることを目標に、AdobeとGoogleが開発したフォントファミリーで、とりあえずNoto Sans。というnoteの記事があるぐらいポピュラーなフォントです。

全言語対応を目指している為、和文フォントが利用可能です。

Noto Sans Japaneseの字の太さは極細の「Thin」から極太の「Black」まで6種あり、パソコンやモバイル端末などさまざまなシーンでの可読性を意識したデザインです。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">

.wf-notosansjapanese { 
	font-family: "Noto Sans JP";
}

こころ明朝

こころ明朝は、少しほっそりとして軽い印象の明朝体のフォントです。

漢字は、IPA明朝体で補完されていて、第2水準漢字まで全て収録されています。

<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet">

.wf-kokoro { font-family: "Kokoro", JPAPGothic; }

はんなり明朝

はんなり明朝は、TypingArtで公開されているフリーフォントのひとつで、Google Fontでも公開されています。

行書体のような線の繋がりや「墨だまり」がありつつ、やさしくふんわりとした雰囲気が特徴です。

Webフォントの収録文字に漢字は含まれていませんが、親和性が高く他のフォントと併用しても使用できます。

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">

.wf-hannari { font-family: "Hannari", JPAPGothic;; }

M PLUS 1p

M PLUS 1pもGoogle Fontでも公開されているフォントで、丸みがありポップな印象を持たせられ、使い勝手の良いフォントです。

Windows環境や、18px以下の小さいフォントサイズを使用する場合にフォントのつぶれが発生することがあり、その際はCSSの「transform:rotate(0.05deg);」で少し傾けることで解決するそうです。※自分はmacなので状況把握できていません・・・。

<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">

.wf-mplus1p { font-family: "M PLUS 1p"; }

Rounded M+

M+ FONTをベースに丸ゴシック加工されたフォントで、自家製フォント工房で公開されているフリーフォントのひとつです。

Rounded M+の1cに関しては、2018年Google Fontsに正式版としてWEBフォントで公開されています。

「Thin」から「Black」までの7ウエイトが用意されており、字種も8,546字が収録されています。M+ FONTが持っているモダンな雰囲気をそのままに、角が丸くなり明るく親しみやすい書体となっています。

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css"/>

 .round-mplus1p {
      font-family: "Rounded Mplus 1c", sans-serif;
 }	

ふい字

日本語で手書きのWEBフォントとして見かけるフォントです。

対応する文字の種類も多く、手書きタッチのクリエイティブには親和性が高いフォントです。

こどもフォント

小学１～３年生で習う漢字が入っている和文フォントで、輪郭のにじみも特徴的です。

いらすとやさんの絵に合いそうな感じです。

ロゴたいぷゴシック

一般的なゴシック体のフォントとは、少し違った風合いを持たせたフリーフォントです。

線が軽めで、力強さよりはエレガントさを感じる書体になっています。

A1明朝

A1明朝はTypeSquareで利用できる、明朝体のフォントです。

「墨だまり」としなやかな曲線が特徴的な、味わいのある書体です。独特なニュアンスを持ちつつ可読性にも優れているため、こちらも見出しから本文まで幅広く利用できます。

源柔ゴシック

源柔ゴシックは、NotoSansを丸ゴシックに改良したフォントで、丸みを持たせた印象は、角ばったゴシック体よりも「やさしい」「ソフト」「ワクワクする」などが挙げられ、日本では標識で見かけることが多く、堅い内容や注意事項も丸ゴシック体を使うことでソフトに伝えられる効果があります。

字の太さは極細の「Extra Light」から極太の「Heavy」まで7種あり、日本語フォントは欧文フォントに比べて文字数が多く、データとしても大きくなります。

重い画像の読み込みに時間がかかるようにフォントの読み込みもファイルサイズが重いと時間がかかってしまいますので、必要なフォントだけを抽出するサブセット化はやっておいた方が良いフォントです。