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

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

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

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

モチベーション

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

ライブラリ

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

webfontloader

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

注意点

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

Bad code

script.js

WebFont.load({
  google: {
    families: [
      "mplus1p",
      "notosansjapanese"
    ],
…
});

Good code

script.js

WebFont.load({
  custom: {
    families: [
      "Mplus 1p",
      "Noto Sans Japanese"
    ],
…
});

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

Google Fonts + 日本語早期アクセスを使ってみた

読み込みが無事に完了したら

htmlにwf-hannari-n4-activeなどとクラスが付与されますので、それを使用しcssでスタイルを設定する。
もしくはfontactiveのイベントでごにょごにょする。

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

読み込みできない場合は

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

話題の`font-feature-settings`

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

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

モチベーション

ライブラリ

JavaScript書く

注意点

Bad code

Good code

読み込みが無事に完了したら

読み込みできない場合は

話題のfont-feature-settings

THANX & BIG UP‼︎‼︎

話題の`font-feature-settings`