この記事では、日本語が使用できるWebフォントを10個厳選して紹介しています。有料・無料のどちらも紹介しています。英語のWebフォントと比較して、日本語のものは文字数の多さからまだまだ使用に課題が残りますが、サブセット化等をしてWebページの表現を広げることが可能です。
無料のWebフォント
※すぐに利用できるWebフォントにはHTML・CSS内で使用するコードも一緒に記載しています。
１. Noto Sans JP
CSS内、@importで読み込む場合
|
1 |
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); |
HTML内、styleタグで読み込む場合
|
1 |
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css"> |
フォントファミリーの指定
|
1 |
font-family: 'Noto Sans JP', sans-serif; |
GoogleのFontサービスで使用できる日本語のWebフォントです。
２. Noto Sans Japanese
CSS内、@importで読み込む場合
|
1 |
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); |
HTML内、styleタグで読み込む場合
|
1 |
<link rel="stylesheet" href=" http://fonts.googleapis.com/earlyaccess/notosansjapanese.css"> |
フォントファミリーの指定
|
1 |
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を使用しましょう。
３. M+ Type-1 Regular
CSS内、@importで読み込む場合
|
1 |
@import url(http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css); |
HTML内、styleタグで読み込む場合
|
1 |
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css"> |
フォントファミリーの指定
|
1 |
font-family:'M+ Type-1 (general-j) Regular', sans-serif; |
M+ FONTSというサイトで公開されている、商業利用もできる自由度の高い、日本語Webフォントです。
４. M+ Type-2 Regular
CSS内、@importで読み込む場合
|
1 |
@import url(http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css); |
HTML内、styleタグで読み込む場合
|
1 |
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css"> |
フォントファミリーの指定
|
1 |
font-family:'M+ Type-2 (general-j) Regular', sans-serif; |
上記のフォントと同じく、M+ FONTSというサイトで公開されている、商業利用もできる自由度の高い、日本語Webフォントです。
５. みんなの文字
科学的に「読みやすい」を検証したフォントです。使用するには、登録が必要です。
６. 瀬戸フォント
もじでぱという、無料でブログにWebフォントを適用できるサービスのフォントのうちの一つです。赤枠で囲ったところに瀬戸フォントが適用されています。
登録すれば無料で使用することができます。瀬戸フォントの他にもたくさんのフォントが用意されています。
有料Webフォント
７. ヒラギノ角ゴ StdN W2
WebフォントサービスFONTPLUSでは、ヒラギノ角ゴもWebフォントとして使用することができます。有料のサービスですが、トライアルもあります。
８. 筑紫B丸ゴシック Std R
こちらも、WebフォントサービスのFONTPLUSで使用できるフォントのうちの一つです。他にも高クオリティの日本語Webフォントがたくさんあります。
９. A-OTF リュウミン Pr6N
Adobe Typekitで使用できるフォントです。Adobe Typekitの契約をする必要がありますが、あのモリサワのフォントを使用することができます。
10. フォーク R
モリサワのWebフォントサービス、TypeSquareで利用できるフォントです。TypeSquareでは、他にもたくさんのWebフォントが用意されています。
