昨年、Googleより無料で使える日本語フォントが9種類公開されました。アルファベットよりも文字数が多く、データの問題的になかなか日本語で使えるフォントがないのが現状ですが、試験的ではありますが一般ユーザーが自由に使えるようになったのは、大きな進歩ではないでしょうか。
今後、正式に公開されるのかはわかりませんが、現段階で公開されている9種類の日本語フォントの使い方をご紹介していきたいと思います。
以下の9種類が利用できます。
1.M+ 1p / 森下浩司
フォントの太さを7段階で指定することが可能です。
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/mplus1p.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/mplus1p.css” rel=”stylesheet” />
CSS
.wf-mplus1p { font-family: “Mplus 1p”; }
2.Rounded M+ 1c / 自家製フォント工房
「M+ 1p」に少し丸みを出したデザイン。
フォントの太さを7段階で指定することが可能です。
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=”stylesheet” />
CSS
.wf-roundedmplus1c { font-family: “Rounded Mplus 1c”; }
3.はんなり明朝 / Hannari / 中井良尚 | Yoshihisa Nakai
女性的な印象で墨溜まりがやや表現されています。
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/hannari.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/hannari.css” rel=”stylesheet” />
CSS
.wf-hannari { font-family: “Hannari”; }
4.こころ明朝 / Kokoro / 中井良尚 | Yoshihisa Nakai
文字間が広めで手書き風なデザイン。
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/hannari.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/kokoro.css” rel=”stylesheet” />
CSS
.wf-kokoro { font-family: “Kokoro”; }
5.さわらび明朝 / Sawarabi Mincho / mishio
2,250語の漢字が登録されています。
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/sawarabimincho.css” rel=”stylesheet” />
CSS
.wf-sawarabimincho { font-family: “Sawarabi Mincho”; }
6.さわらびゴシック / Sawarabi Gothic / mishio
4,469語の漢字が登録されています。
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/sawarabigothic.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/sawarabigothic.css” rel=”stylesheet” />
CSS
.wf-sawarabigothic { font-family: “Sawarabi Gothic”; }
7.ニコモジ / Nico Moji / Ku-ku(Do-Font)
平仮名とカタカナに対応。
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/nikukyu.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/nikukyu.css” rel=”stylesheet” />
CSS
.wf-nikukyu { font-family: “Nikukyu”; }
8.ニクキュウ / Nikukyu / 中井良尚 | Yoshihisa Nakai
猫の肉球をイメージさせるデザイン
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/nicomoji.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/nicomoji.css” rel=”stylesheet” />
CSS
.wf-nicomoji { font-family: “Nico Moji”; }
9.Noto Sans Japanese / 西塚涼子 | Ryoko Nishizuka
Googleが開発中のフォント
@importで読み込む場合
@import url(//fonts.googleapis.com/earlyaccess/nicomoji.css);
styleで読み込む場合
<link href=”https://fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />
CSS
.wf-notosansjapanese { font-family: “Noto Sans Japanese”; }
以上になります。まだまだ試験的ではありますが、試しに個人ブログなどで試してみてはいかがでしょうか。