<p>HogeHoge</p>
const font = new FontFace("hack", "url(https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.003/web/fonts/hack-regular.woff2)", {
style: 'normal',
weight:'400'
});
// DOMツリーのレンダリングを待たずにフォントをダウンロードする
font.load();
// font.load() はPromiseを返す
font.load().then(function() {
// フォントがロードされたらフォントを適用する
document.fonts.add(font);
document.body.style.fontFamily = "hack, sans-serif";
});
// フォントのダウンロード状況を監視
// font.statusは状況に応じて
// "unloaded", "loading", "loaded", "error"
// のうちのどれかを返す
const fontLoadingStatus = font.status
// document.fonts.check()は、そのフォントが読み込まれているかどうかを
// Booleanで返す
const isFontLoaded = document.fonts.check("12px hack");
console.log(fontLoadingStatus);
console.log(isFontLoaded);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.