網頁自訂字型

Posted on Edited on In Word count in article: 87 Reading time ≈ 1 mins.

產生字型檔

WOFF2 檔為壓縮後的檔案，通常會有更快的加載速度，可參考這篇 FontForgeTransfer ，產生網頁字型 WOFF2 檔

嵌入字型

透過 CSS 嵌入字型

1
2
3
4
5
6
@font-face {
  font-family: '[字型名稱]';
  font-style: normal;
  font-weight: 400;
  src: url(/url/to/[檔案].woff2) format("woff2");
}

📜 參考資料

  1. @font-face