日本で一番日本語Webフォント「Google Fonts + 日本語早期アクセス」が好き。tattです。
ついに、この10月(執筆時は2016/11/30)にGoogleが日本語Webフォント「Google Fonts + 日本語早期アクセス」を試験的に無料公開しましたね。
そんなわけで「日本語Webフォント「Google Fonts + 日本語早期アクセス」をwebfontloaderで読み込んでみた」、tatt開催しまーす
モチベーション
Webフォント読み込み完了時の再描画によるテキストのちらつきに対して、JavaScriptで読み込み完了を検知してfadeInさせるとかでいい感じにしたい。
ライブラリ
使用したライブラリは1つだけとなります。
JavaScript書く
とりあえず、全部読み込んでみる。
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
WebFont.load({
google: {
families: [
"mplus1p",
"notosansjapanese"
],
…
});
Good code
WebFont.load({
custom: {
families: [
"Mplus 1p",
"Noto Sans Japanese"
],
…
});
読み込んだWebフォントの見た目に関する取扱いについては、こちらで詳しくご覧になってください。
読み込みが無事に完了したら
- 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フォントの高さのみ？