由於原本Google提供的@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400&display=swap'); 會有阻塞渲染問題，導致 CSS 檔案載入變慢，瀏覽器必須先下載完 CSS，再解析到 @import，再去下載字體，這會增加網頁出現「空白字體（FOIT）」的時間。
基於效能優化，2026年建議改用CSS的@font-face自訂字體方法，也就是把字體放在自己的伺服器讓用戶載入網站字形，效能比@import方法要好，穩定性也更高，以下是完整建立@font-face方法說明。
1、先去fonts Google選擇需要的開源字體並下載 https://fonts.google.com/
2、下載回來後解壓縮字形檔，因該是.ttf格式，建議改成 woff2格式會「比較穩」 .woff2 是現代瀏覽器標準壓縮過（小很多）Google Fonts 主力格式，以下網站可以更改字形副檔名格式
點選Select File再選擇From my computer
選擇電腦中要改檔案的.ttf上傳後，選擇改為 woff2
Convert後等轉換完成，將.woff2 下載回來
3、在自己網站根目錄建一個fonts資料夾，然後吧字形檔貼入(例如cwTeXHei.woff2)，接者再fonts資料夾中建一個.htaccess 貼上以下防熱連設定，避免字形資源被人拿去白漂
RewriteEngine On
# 只處理字型檔
RewriteCond %{REQUEST_URI} \.(woff2|woff|ttf|otf)$ [NC]
# 空 referer 放行：直接開檔、本地測試、某些瀏覽器情境
RewriteCond expr "%{HTTP_REFERER} == ''"
RewriteRule .* - [L]
# localhost / 127.0.0.1 放行：只在目前主機就是本地端時成立
RewriteCond %{REQUEST_URI} \.(woff2|woff|ttf|otf)$ [NC]
RewriteCond %{HTTP_HOST} ^(localhost|127\.0\.0\.1)(:[0-9]+)?$ [NC]
RewriteRule .* - [L]
# 同站 referer 放行：線上站自己引用自己的字型
RewriteCond %{REQUEST_URI} \.(woff2|woff|ttf|otf)$ [NC]
RewriteCond expr "%{HTTP_REFERER} -strmatch 'http://%{HTTP_HOST}/*' || %{HTTP_REFERER} -strmatch 'https://%{HTTP_HOST}/*'"
RewriteRule .* - [L]
# 其他來源引用字型才擋
RewriteRule \.(woff2|woff|ttf|otf)$ - [F,L]
4、在網站的<head>中貼入以下CSS設定</head>
<style type='text/css'>
@font-face {
font-family: 'cwTeXHei';
src: url('https://您的網址/fonts/cwTeXHei.woff2') format('woff2);
font-display: swap; //優化網頁顯示防止「隱形文字」問題（FOIT）
}
</style>
備註：format() 不是隨便寫，是「固定對應」
format格式對照
副檔名->format
.woff2->'woff2'
.woff->'woff'
.ttf->'truetype'
.otf->'opentype'
5、在需要使用自訂字體的地方用CSS->font-family:cwTeXHei即可顯示該字形，使用@font-face不會一開始就下載只有當CSS實際用到該字體時，瀏覽器才會下載，因此網站即使放了10幾@font-face只有被font-family引用到的字體才會被下載，但如果網站用太多字體，仍然會拖慢首次開啟的瀏覽速度，所以建議還是適當使用。
工作心得撰寫：徐嘉裕 Neil hsu
留言
張貼留言