
Googleが提供しているウェブフォントのCDN(?)、Google Fontsの日本語早期アクセスのページが公開されました。
実は既に2年ほど前から「Early Access – Google Fonts」で同じフォントは試験提供されていました。とはいえ、今回日本語フォントのみを扱い「日本語で記述された」ページが公開されたことで、導入が進むことが期待されます。
※このページも記事本文にGoogle Fontsの「Noto Sans Japanese」を適用しています。
収録フォントについて
記事執筆時点(2016/10/19)で提供されているのは下記9書体です。
- M+ 1p
- Rounded M+ 1c
- はんなり明朝
- こころ明朝
- さわらび明朝
- さわらびゴシック
- ニクキュウ
- ニコモジ
- Noto Sans Japanese
Noto Sans JapaneseはGoogleとAdobeが共同で開発したことで話題になったフォントですね。AdobeからはSource Han Sans(和名:源ノ角ゴシック)という名前で提供されてます。
商用クリエイティブにも耐えうるクオリティの高さで、日本語フォントには珍しくウェイトが7種類もあり、かつ「無償」ということで話題になりました。Android 6.0 MarshmallowからはOSのデフォルトフォントとして使用されています。
M+ 1pとRounded M+ 1cはどちらも森下浩司さんがデザインしているM+ FONTSのものですね。派生フォントが多数存在することで有名です。私個人ではここ数年、業務で使用しているエディタ系のフォントには、派生フォントの一つであるVLゴシックを愛用してます。
導入方法
link
タグで読み込んでCSSのfont-family
でフォント指定するためのコードは、前述のGoogle Fonts + 日本語早期アクセスページ内に記載されています。例えばNoto Sans Japaneseであればこんな感じ。
※Google Fonts側に記載されている埋め込み用のlink
要素にrel="stylesheet"
属性を追加しています。
link
要素を使わず、.css
ファイルの中に@import
を使って適用する場合は以下のようになります。
おわりに
日本語ウェブフォントは何と言っても単フォントの収録文字数が多く、データサイズが重くなるため、低速回線からアクセスするとページ表示時にしばらく文字が表示されなかったり、フォントが適用されるまでにラグが生じるなどの問題が生じます。GoogleがこうしたフォントをCDNとして提供することで、こうした懸念が一定程度解消され、日本語ウェブフォントがもっと使われるようになるといいですね。