0

Google日本語フォントが試験的に公開!使い方を解説!

Google日本語フォントが試験的に公開!使い方を解説!

昨年、Googleより無料で使える日本語フォントが9種類公開されました。アルファベットよりも文字数が多く、データの問題的になかなか日本語で使えるフォントがないのが現状ですが、試験的ではありますが一般ユーザーが自由に使えるようになったのは、大きな進歩ではないでしょうか。

今後、正式に公開されるのかはわかりませんが、現段階で公開されている9種類の日本語フォントの使い方をご紹介していきたいと思います。

Google Fonts + 日本語 早期アクセス

以下の9種類が利用できます。

9種類

デモサンプル

1.M+ 1p / 森下浩司

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 / 自家製フォント工房

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

はんなり明朝 / Hannari

女性的な印象で墨溜まりがやや表現されています。

@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

こころ明朝 / Kokoro

文字間が広めで手書き風なデザイン。

@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

さわらび明朝 / Sawarabi Mincho

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

さわらびゴシック / Sawarabi Gothic

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)

ニコモジ / Nico Moji

平仮名とカタカナに対応。

@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

ニクキュウ / Nikukyu

猫の肉球をイメージさせるデザイン

@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

Noto Sans Japanese

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”; }

 

以上になります。まだまだ試験的ではありますが、試しに個人ブログなどで試してみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > Google日本語フォントが試験的に公開!使い方を解説!