web-font setting

font.html

<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

font.js

// 假設這裡要載入的字體是 Noto Sans TC
document.fonts.load('12px Noto Sans TC').then(function() {
  const body = document.querySelector('body')
  body.style.fontFamily = `"Noto Sans TC", ${window.getComputedStyle(body).getPropertyValue('font-family')}`;
});

font.scss

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}