由於原本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 主力格式,以下網站可以更改字形副檔名格式 https://cloudconvert.com/ 點選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 %{HTTP_REFERER} ^$ [OR] # 允許 localhost / 127.0.0.1(開發用) RewriteCond %{HTTP_REFERER} ^http://(localhost|127\.0\.0\.1)(:[0-9]+)? [NC,OR] # 允許自己網域(含 www / 子網域) RewriteCond %{HTTP_REFERER} ^https?://([^/]+\...