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

フォントのアイキャッチ

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

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

みんなの文字

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

みんなの文字のキャプチャ
みんなの文字 より

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

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

みんなの文字のサンプル

みんなの文字

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

Noto Sans JP

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

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

notosansjpのキャプチャ
googlefont より

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

Noto Sans JPのサンプルとコード

Noto Sans JP

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

コードを表示する

HTML

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

CSS

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

こころ明朝

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

こころ明朝のフォント
googlefont より

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

こころ明朝のサンプルとコード

こころ明朝

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

コードを表示する

HTML

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

CSS

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

はんなり明朝

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

googlefont より

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

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

はんなり明朝のサンプルとコード

はんなり明朝

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

コードを表示する

HTML

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

CSS

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

M PLUS 1p

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

M PLUS 1pのキャプチャ

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

M PLUS 1pのサンプルとコード

M PLUS 1p

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

コードを表示する

HTML

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

CSS

.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が持っているモダンな雰囲気をそのままに、角が丸くなり明るく親しみやすい書体となっています。

Rounded M+のサンプルとコード

Rounded M+

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

コードを表示する

HTML

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

CSS

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

ふい字

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

ふい字置場。 より

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

ふい字のサンプル

ふい字

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

こどもフォント

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

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

こどもフォントのキャプチャ
TypingArt より

こどもフォントのサンプル

こどもフォント

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

ロゴたいぷゴシック

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

フォントなさんのキャプチャ
フォントな より

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

ロゴたいぷゴシックのサンプル

ロゴたいぷゴシック

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

A1明朝

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

A1明朝のフォント
TypeSquare より

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

A1明朝のサンプル

A1明朝

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。

源柔ゴシック

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

自家製フォント工房 より

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

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

源柔ゴシックのサンプル

源柔ゴシック

1234567890 abcABC

住みにくさが高じると、安いところへ引き越したくなる。どこへ越しても住みにくいと悟ったとき、詩が生れて、絵ができる。

人の世を作ったのは神でもなければ鬼でもない。やはり向う三件両隣にちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。

あれば人でなしの国に行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくいところをどれほどか、寛容て(くつろげて)、束の間の命を、束の間でも住みよくせねばならぬ。

ここに詩人という天職ができて、ここに画家という使命が降る。

あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊い。