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