日本語webフォント「Google Fonts + 日本語早期アクセス」をwebfontloaderで読み込んでみた

日本で一番日本語Webフォント「Google Fonts + 日本語早期アクセス」が好き。tattです。

ついに、この10月(執筆時は2016/11/30)にGoogleが日本語Webフォント「Google Fonts + 日本語早期アクセス」を試験的に無料公開しましたね。


そんなわけで「日本語Webフォント「Google Fonts + 日本語早期アクセス」をwebfontloaderで読み込んでみた」、tatt開催しまーす:open_hands:


## モチベーション
Webフォント読み込み完了時の再描画によるテキストのちらつきに対して、JavaScriptで読み込み完了を検知してfadeInさせるとかでいい感じにしたい。

## ライブラリ
使用したライブラリは1つだけとなります。

* <a href="https://github.com/typekit/webfontloader" target="_blank">webfontloader</a>


## JavaScript書く
とりあえず、全部読み込んでみる。

```script.js
import WebFont from "webfontloader";

WebFont.load({
  custom: {
    families: [
      "Mplus 1p",
      "Rounded Mplus 1c",
      "Hannari",
      "Kokoro",
      "Sawarabi Mincho",
      "Sawarabi Gothic",
      "Nikukyu",
      "Nico Moji",
      "Noto Sans Japanese"
    ],
    urls: [
      "https://fonts.googleapis.com/earlyaccess/mplus1p.css",
      "https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css",
      "https://fonts.googleapis.com/earlyaccess/hannari.css",
      "https://fonts.googleapis.com/earlyaccess/kokoro.css",
      "https://fonts.googleapis.com/earlyaccess/sawarabimincho.css",
      "https://fonts.googleapis.com/earlyaccess/sawarabigothic.css",
      "https://fonts.googleapis.com/earlyaccess/nikukyu.css",
      "https://fonts.googleapis.com/earlyaccess/nicomoji.css",
      "https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"
    ]
  },
  timeout: 3000,
  loading: ()=> {
    // ロードしているとき allfonts
    console.log("ロードしています");
  },
  active: ()=> {
    // Web Fontが使用可能になったとき allfonts
    console.log("いけました");
  },
  inactive: ()=> {
    // ブラウザがサポートしていないとき allfonts
    console.log("だめでした");
  },
  fontloading: (fontFamily, fontDescription)=> {
    // fontFamilyをロードしているとき onefont
    console.log("loading", fontFamily, fontDescription);
  },
  fontactive: (fontFamily, fontDescription)=> {
    // fontFamilyが使用可能になったとき onefont
    console.log("active", fontFamily, fontDescription);
  },
  fontinactive: (fontFamily, fontDescription)=> {
    // fontFamilyをブラウザがサポートしていないとき onefont
    console.log("inactive", fontFamily, fontDescription);
  }
});
```

## 注意点
過去に<a href="https://fonts.google.com/" target="_blank">Google Fonts</a>でwebfontloaderを使用されたことがあるよ〜:raising_hand:っていう方は特に注意。
`load`メソッドに渡すオブジェクトのキーが`google`では読み込めず、`custom`を指定する必要があります。
`google`を指定した場合、APIのURLが`https://fonts.googleapis.com/css?family=◯◯◯`になってしまい、Google Fonts + 日本語早期アクセスのAPIのURLとは異なるためです。
また、`families`で設定するフォント名は正しい名前を使用してください。(`Hannari`などは`hannari`と設定してもいけましたが…)
example)
:no_good: → "mplus1p"
:ok_woman: → "Mplus 1p"

#### :no_good: Bad code
```script.js
WebFont.load({
  google: {
    families: [
      "mplus1p",
      "notosansjapanese"
    ],
…
});
```
#### :ok_woman: Good code
```script.js
WebFont.load({
  custom: {
    families: [
      "Mplus 1p",
      "Noto Sans Japanese"
    ],
…
});
```

読み込んだWebフォントの見た目に関する取扱いについては、こちらで詳しくご覧になってください。

* <a href="http://qiita.com/umeume66/items/29c60534367b50252c88" target="_blank">Google Fonts + 日本語 早期アクセス を使ってみた</a>

## 読み込みが無事に完了したら
* htmlに`wf-hannari-n4-active`などとクラスが付与されますので、それを使用しcssでスタイルを設定する。
* もしくは`fontactive`のイベントでごにょごにょする。

などで、fadeInさせたりしていい感じにすることが可能となります。

* <a href="https://t-touji.github.io/japanese_early_access_webfontloader/" target="_blank">デモ</a>
* <a href="https://github.com/t-touji/japanese_early_access_webfontloader" target="_blank">ソースコード</a>

## 読み込みできない場合は
htmlに`wf-hannari-n4-inactive`や`wf-inactive`などのクラスが付与されます。
また、JavaScriptでのエラーハンドリングは`fontinactive `イベントや`inactive`イベントで行えます。


## 話題の`font-feature-settings`
`font-feature-settings`を設定すると、`Nikukyu`フォントの<font color="DeepPink">高さ</font>が変わるという…
プロポーショナルメトリクスに対応しているのは`Nikukyu`フォントの高さのみ？


## THANX & BIG UP‼︎‼︎

* <a href="http://w3q.jp/t/95" target="_blank">Webフォントがいつ読み込まれたかを判断したい場合は、WebFont Loaderを使おう</a>
* <a href="http://qiita.com/umeume66/items/29c60534367b50252c88" target="_blank">Google Fonts + 日本語 早期アクセス を使ってみた</a>
* <a href="https://ics.media/entry/14087" target="_blank">文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA</a>
* <a href="http://qiita.com/damele0n/items/6afc5160cf7ea8b15787" target="_blank">ナウでヤングな CSS Font Loading</a>