日本語フリーwebフォント表示サンプル（ゴシック編）

2022/02/28 2013/06/26
タグ: webフォント

無料のwebフォントとして使用できる日本語書体を紹介しているサイトはたくさんあるのですが、肝心の表示サンプルが画像でイメージがつかみづらいなと思っていました。

そこで、実際にwebフォントを一覧で表示させるサンプルページを作ってみることにしました。
webフォントといっても、基本的にウェブ表示専用に作られているわけではなく、WindowsやMacintoshなどのクライアントPCにインストールして使うTrueTypeやOpebTypeから変換して使います。今回はモリサワなどの有償のフォントベンダーのものではなく、基本的にライセンスフリー（もしくはそれに近いもの）で商用利用もできる日本語フォントを実際に表示させてみます。

あくまでわたしの好みのお勧めフォントということにはなりますが、今回はあえてサブセット化も行っていませんので、このサイトのほかのページとの速度差を体感していただくと、重い・遅いといったデメリット面についての参考にもなるのではないでしょうか。

本当は1ページにまとめようと思っていたのですが、表示速度を考慮してタイプ別に分けることとしました。
サンプル文は宮沢賢治の作品の一節、MacOSXのFont Book風です。
それではまずはゴシック編です。

INDEX

M+
Rounded M+
IPAexゴシック
1. IPAexゴシック
戸越フォント
1. togoshi-gothic

M+

無償で提供されている高品質の日本語書体でライセンスに制限を設けておらず、派生バージョンもあります。文字数はM+ TESTFLIGHT 054の2012/12/30リリース分でJIS第1水準を含む4,400文字です。第2水準の6355文字には足りず、不足分を補った合成フォントもいくつか作られています。基本7ウエイトでプロポーショナルと等幅、および、それぞれのひらがな/カタカナのデザイン違いのバリエーションがあります。
かなり太めのフォントウエイトも用意されており、見出しやタイトル表示に重宝しそうです。
ライセンス：制限なし
ダウンロード先：http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/download/index.html#download

mplus-2p-black

あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

mplus-2p-bold

mplus-2p-regular

mplus-2p-light

Rounded M+

上記のM+から派生した丸ゴシックフォントですが、ベースはM+ TESTFLIGHT 046の2012/02/24リリース分の約3775文字と最新のM+より若干少なめです。オリジナルのM+と同じく基本7ウエイトでそれぞれのバリエーションがあります。小さいサイズだと本家のM+との差があまり分からないかもしれませんが、丸ゴシック系というのは少ないため、掲載してみました。大きく使うと角丸になっているのが分かります。

ライセンス：制限なし
ダウンロード先：http://d.hatena.ne.jp/itouhiro/20120226

rounded-mplus-2p-black

rounded-mplus-2p-bold

rounded-mplus-2p-regular

rounded-mplus-2p-light

IPAexゴシック

IPAexゴシックはIPA（独立行政法人情報処理推進機構）によって配布されている高品質な日本語フォントです。和文の仮名・約物・漢字は固定幅、欧文は可変幅となります。2004

ライセンス：IPAフォントライセンスv1.0
ダウンロード先：~~http://ipafont.ipa.go.jp/ipaexfont/download.html~~

IPAexゴシック

戸越フォント

和田研フォントベースの日本語フォントで文字数も多く、実用的な書体です。ただ、和田研フォント派生のため、この部分のライセンスが微妙というかフリーではないという見解もあるようです。

ライセンス：和田研ライセンス+修正BSDライセンス
ダウンロード先：http://togoshi-font.sourceforge.jp/

togoshi-gothic

実際やってみるとライセンス関係の調査も含め、結構な手間でしたが、勉強にもなりました。
フリーの日本語webフォントを探している方はぜひお役立てください。また、「この書体いいよ」とか「ライセンスに問題あるのでは？」というものがありましたら、教えてください。

本ページをパソコンでご覧の方はぜひQRコードよりスマホやタブレットなどでの表示の様子もご確認ください。

コメントを残すコメントをキャンセル

超簡単！アイコンフォント Font Awesomeの使い方 | ひと昔前なら画像で表現していたようなアイコン。ウェブフォントの登場によって、描画速度が速く手軽に挿入できるテキストフォン...

3分で設置できる！？CSS3の角丸グラデーションボタン | CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像なしで表現できるように...

ディレクトリへのアクセスでindex of/を表示させない | レンタルサーバではリクエストされたディレクトリにindex.htmlなどブラウザで表示させるべき内容がない場合、inde...

ブラウザの画像などが更新されない | WordPressをはじめ、サイト構築を行っていると変更が反映されない場合があります。通常、Windows環境のブラウザ...

商用利用もOK!無料で使えるゴシック系和文webフォント

日本語フリーwebフォント表示サンプル（ゴシック編）