【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページを使って見た。
Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。
これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。
簡単にですが公開されたフォントを紹介します。
Google Fonts + 日本語早期アクセス
嬉しいポイント
今回追加されたFontは当たり前ですが日本語という点、そして明朝体が追加されているところがポイントだと思います。
またGoogleのWebFontなのでこれまで同様CDNとして活用が可能です。
CDNだと数行コードに追記するだけで済むので実装も簡単なのも嬉しいです。
何より今回日本語フォントが追加された事でGoogleが今後も日本語Web Fontに対して積極的に取り組んでくれる姿勢を見せてくれたことがうれしいですね。
収録されたフォントについて
記事執筆時点（2016/10/21）で提供されているのは下記9書体です。
- M+ 1p
-
日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。
- Rounded M+ 1c
-
明るく伸びやかなデザインを心がけた。
- はんなり明朝
-
明朝体は墨溜まりを意識してデザインしています。
- こころ明朝
-
少しほっそりとした、角丸な明朝体です。まろやかで、軽い感じがする文字です。
- さわらび明朝
-
本文用のフォントとして使いやすくなるようにイメージしています。
- さわらびゴシック
-
本文用のフォントとして使いやすくなるようにイメージしています。
- ニクキュウ
-
モリっとして、ツヤのあるカタカナフォントです。
- ニコモジ
-
すこしでもデザインのてだすけになれればさいわいです。
注意点
このプロジェクトは早期アクセス（アーリープロジェクト）として発表されています。
耳慣れない言葉かもしれませんが早期アクセス（アーリープロジェクト）とは、
ソフトウェアやWebサービスのリリース方法の一種でいわゆる「アルファ版」「ベータ版」「テスト版」「リリースカレント版」と言われるものです。
ですので完全版ではないと言われてるものですのですぐに案件に取り入れるのは少し判断をしたほうが良いかもしれません。
個人的には今すぐでも使えるクオリティだと思うのですが
使い方
Google Fontsの日本語早期アクセスではCDNでWebフォントを使えますのでファイルをダンロードする必要はありません。
下記の用にCSSでファイルを読み込んでfont-familyに設定するだけで簡単に実装できます。
M+ 1psample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
.wf-mplus1p { font-family: "Mplus 1p"; }
[/html]
Rounded M+ 1csample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; }
[/html]
はんなり明朝sample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
.wf-hannari { font-family: "Hannari"; }
[/html]
こころ明朝sample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />
.wf-kokoro { font-family: "Kokoro"; }
[/html]
さわらび明朝sample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
[/html]
さわらびゴシックsample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }
[/html]
ニクキュウsample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />
.wf-nikukyu { font-family: "Nikukyu"; }
[/html]
ニコモジsample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
.wf-nicomoji { font-family: "Nico Moji"; }
[/html]
Noto Sans Japanesesample
[html]
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }
[/html]