Webページの表現を広げてくれる日本語のWebフォント10選

うえつぎ

元システムエンジニアで、今はWeb制作に並々ならぬ興味がある主婦です。

この記事では、日本語が使用できるWebフォントを10個厳選して紹介しています。有料・無料のどちらも紹介しています。英語のWebフォントと比較して、日本語のものは文字数の多さからまだまだ使用に課題が残りますが、サブセット化等をしてWebページの表現を広げることが可能です。

無料のWebフォント

※すぐに利用できるWebフォントにはHTML・CSS内で使用するコードも一緒に記載しています。

1. Noto Sans JP

2016-05-27_13h01_50

CSS内、@importで読み込む場合

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

HTML内、styleタグで読み込む場合

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

フォントファミリーの指定

font-family: 'Noto Sans JP', sans-serif;

GoogleのFontサービスで使用できる日本語のWebフォントです。

2. Noto Sans Japanese

2016-05-27_13h03_57

CSS内、@importで読み込む場合

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

HTML内、styleタグで読み込む場合

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

フォントファミリーの指定

font-family: 'Noto Sans Japanese', serif;

こちらも、GoogleのFontサービスで使用できる日本語のWebフォントです。

Noto Sans JPとNoto Sans Japaneseの違い

どちらもGoogleのWebフォントサービスで使用できるフォントですが、フォント数は数十字ほどNoto Sans JPの方が多くなっています。フォントの太さに関しては、Noto Sans Japaneseの方が種類が多く、DemiLightを使用したい場合はNoto Sans Japaneseを使用しましょう。

3. M+ Type-1 Regular

2016-05-27_14h22_14

CSS内、@importで読み込む場合

@import url(http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css);

HTML内、styleタグで読み込む場合

<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css">

フォントファミリーの指定

font-family:'M+ Type-1 (general-j) Regular', sans-serif;

M+ FONTSというサイトで公開されている、商業利用もできる自由度の高い、日本語Webフォントです。

4. M+ Type-2 Regular

2016-05-27_14h24_20

CSS内、@importで読み込む場合

@import url(http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css);

HTML内、styleタグで読み込む場合

<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css">

フォントファミリーの指定

font-family:'M+ Type-2 (general-j) Regular', sans-serif;

上記のフォントと同じく、M+ FONTSというサイトで公開されている、商業利用もできる自由度の高い、日本語Webフォントです。

5. みんなの文字

2016-05-27_15h29_23

科学的に「読みやすい」を検証したフォントです。使用するには、登録が必要です。

6. 瀬戸フォント

2016-05-27_15h32_26

もじでぱという、無料でブログにWebフォントを適用できるサービスのフォントのうちの一つです。赤枠で囲ったところに瀬戸フォントが適用されています。

登録すれば無料で使用することができます。瀬戸フォントの他にもたくさんのフォントが用意されています。

有料Webフォント

7. ヒラギノ角ゴ StdN W2

2016-05-27_15h51_50

WebフォントサービスFONTPLUSでは、ヒラギノ角ゴもWebフォントとして使用することができます。有料のサービスですが、トライアルもあります。

8. 筑紫B丸ゴシック Std R

2016-05-27_15h36_46

こちらも、WebフォントサービスのFONTPLUSで使用できるフォントのうちの一つです。他にも高クオリティの日本語Webフォントがたくさんあります。

9. A-OTF リュウミン Pr6N

2016-05-27_15h43_40

Adobe Typekitで使用できるフォントです。Adobe Typekitの契約をする必要がありますが、あのモリサワのフォントを使用することができます。

10. フォーク R

2016-05-27_16h00_55

モリサワのWebフォントサービス、TypeSquareで利用できるフォントです。TypeSquareでは、他にもたくさんのWebフォントが用意されています。