Divi 自訂字體上傳教學：3 步驟搞定字體格式轉換，讓網站文字從此與眾不同

Divi 上傳自訂字體完整教學：解決格式與上傳被擋的卡關點

Divi 想要讓網站文字有設計感，唯一可靠路徑是「下載合法授權字型 → 轉成 TTF 或 OTF → 在模組 Design 設定欄按下 UPLOAD 上傳」。Divi 內建字型幾乎全來自 Google Fonts 提供的英歐字型，中文選擇屈指可數，無法做出明體、圓體、手寫等層次。真正卡住九成站長的從來不是按下那個上傳鈕，而是 Divi 只接受 TTF 與 OTF 兩種格式（依 Elegant Themes 官方文件說明），而網路上能合法下載的中文字型大量是 WOFF/WOFF2，加上 WordPress 預設擋下 ttf/otf 會跳出「Sorry, This File Type Is Not Permitted for Security Reasons」這道安全門。

重點先看：Divi 只吃 TTF 與 OTF，WOFF/WOFF2 必須先轉檔才能用，這是上傳失敗的主因，Elegant Themes 官方文件也明確列出這項格式限制；解 WordPress 擋檔安全限制，優先用 upload_mimes filter 只開放字型格式，而非全面關閉檔案過濾。

為什麼一定要上傳自訂字型？內建字型的真實限制

Divi 內建字型來自 Google Fonts，中文常用字型屈指可數，風格也偏單調，要做有品牌識別度的中文網站幾乎一定得額外上傳合法授權字型。你打開任何一個模組的字型下拉選單，能選的中文選項不過寥寥幾款，明體、圓體、手寫、襯線變化這些設計層次根本做不出來，這跟 Divi 主題終極指南從購買到進階技巧 裡點出的「國外主題對中文友善度有限」是同一個結構性問題。

品牌一致性是更實際的推力。你 Logo、社群貼文、印刷品用的字型跟網站不同步，視覺就會散掉。接案設計師尤其有感，客戶給你一套品牌字型要你套到網站上，結果 Divi 字型清單裡找不到，你不可能叫客戶換 Logo。上傳自訂字型是唯一的整合路徑，品牌色彩挑選與心理學應用 也是同樣的道理，視覺資產要對齊，沒有第二條。我在接案過程中遇過最尷尬的情況，是客戶的 CIS 規範書明明白白寫著標準字型是哪一套，卻因為 Divi 沒內建、對方又怕麻煩不想上傳，整個品牌網站的標題硬是用了跟印刷品差一大截的替代字型，上線後被行銷主管一眼抓出來退件，來回改了三次才搞定。這種成本其實完全可避免，只要你願意花十分鐘把自訂字型上傳這件事做完，後面所有模組都能直接套用，不用再跟替代字型妥協。字型不是裝飾，它是品牌識別的一部分，跟配色一起決定了網站看起來像誰。

順帶一提，Google Fonts CDN 在部分地區載入並不穩定，呼叫外部 CDN 還會牽涉到隱私法規的傳輸問題。把字型檔抓回來本地託管，反而更快也更隱私友善。這條路徑的細節跟 WordPress 本機託管 Google Fonts 加速 的思路一致，差別只在這裡託管的是你自己上傳的設計字型。整體網站速度的觀念可以先看 網站速度優化核心技巧 打底，字型只是其中一環。

好消息是，免費商用中文字型的生態這幾年成熟很多。jf open 粉圓體、辰宇落雁體這類開源字型都能合法用於商業網站，上傳門檻比多數人想像的低。字型怎麼挑可以參考 中文字體設計與字型推薦指南，排版怎麼搭則看 排版設計與字體行距設定技巧。不過下載之前授權條款要逐字讀清楚，這是另一個大坑，後面會專門講。

• 內建字型以英歐文為主，中文常用字型屈指可數，做不出明體、圓體、手寫等設計層次。
• 品牌一致性需求：Logo、社群、印刷品用的字型常與網站不同步，上傳自訂字型才能統一視覺。
• Google Fonts CDN 在部分地區載入不穩，本機託管自訂字型反而更快也更隱私友善。
• 免費商用中文字型生態成熟，jf open 粉圓體、辰宇落雁體等開源字型降低了上傳門檻。

Divi 接受哪些字體格式？TTF、OTF、WOFF 差異與相容性

Divi 只接受 TTF 與 OTF 兩種格式，WOFF/WOFF2 雖然是網頁字型主流卻無法直接匯入 Divi，必須先轉檔。這是九成站長第一次上傳失敗的真正原因，不是你不會操作，是格式根本不對。從 Google Fonts 下載的 webfont 包常是 WOFF，依 Elegant Themes 官方文件所述無法直接丟進 Divi。

要判斷手上字型是哪種格式，看副檔名最快。.ttf 與.otf 可直接上傳，.woff 或.woff2 必須先轉成 TTF 或 OTF。字型格式選對了，接下來的排版才有意義，網頁版面設計與響應式排版 裡對字型與版面的搭配有完整討論。這裡先給你一張格式相容性對照表，後面再講轉檔工具怎麼挑。

格式	全名	設計目的	Divi 可否上傳	瀏覽器支援
TTF	TrueType Font	桌面軟體通用	可以	廣泛，IE 9 以下除外
OTF	OpenType Font	桌面軟體進階格式	可以	廣泛，IE 9 以下除外
WOFF	Web Open Font Format	網頁壓縮專用	不行，須先轉檔	主流瀏覽器都支援
WOFF2	WOFF 第二代	更高壓縮比的網頁字型	不行，須先轉檔	新版瀏覽器支援度高

TTF 與 OTF 是桌面軟體與 Divi 通吃的格式，相容性最廣。Office Word、Adobe Illustrator 這類軟體用的也是這兩種。WOFF 與 WOFF2 是為網頁壓縮設計的格式，瀏覽器支援度高、檔案較小，但 Divi 的上傳器不支援。講白一點，Divi 處理的是「設計編輯器要用的字型」，不是「前端瀏覽器要載入的字型」，兩者用不同格式是合理的設計選擇，只是苦了只會找 WOFF 的人。英文字型的整體生態可以併著 精選英文字體推薦與下載 看，理解中英字型在格式需求上的差異。

最常踩的陷阱是從 Google Fonts 下載下來的包，裡面往往夾著一堆 WOFF，新手直接拿去傳就失敗。解法很簡單，看到.woff 副檔名就先停下來，跳到下一節的轉檔流程把它變成 TTF。前端字型載入的整體觀念，可以併著中文字型生態整理一起看，那裡有更廣的脈絡。

轉檔工具：Convertio 還是 Font Squirrel

把 WOFF 或其他格式轉成 Divi 能用的 TTF/OTF，主流有兩個工具：Convertio 與 Font Squirrel Webfont Generator。新手推薦 Convertio，介面直覺、支援多種格式、全程免安裝；Font Squirrel 功能較細，可調字型子集，適合進階使用者縮小中文字型體積。

先說 Convertio 的操作流程，三步驟就完成：登入 Convertio 網站、匯入要轉換的字型檔案、選目標格式為 TTF 之後下載。它可轉換的格式很多，文字、圖像都能處理，對只想要快速拿到一個 TTF 的人來說門檻最低。轉完檢查一下檔名有沒有亂碼，中文字型檔名有時會在轉換過程跑掉。

1. 登入 Convertio 網站，點選匯入檔案，把要轉換的字型丟進去。
2. 在目標格式選單選擇 TTF（或 OTF），按下轉換鈕開始作業。
3. 轉換完成後下載檔案，檢查檔名無亂碼、副檔名正確。
4. 保留原始授權文件，轉檔不改變授權狀態，免費可商用才可商用。

Font Squirrel Webfont Generator 走的是另一條路。它功能較深，可設定字型子集（subset），也就是只保留你實際會用到的字元，對動輒數 MB 到十數 MB 的中文字型來說，這能明顯縮小體積。不過它的設定選項較多，新手第一次用容易卡在 Expert 模式那一頁，建議先用 Basic 模式跑通一次再進階。

工具	適合對象	子集功能	安裝需求	上手難度
Convertio	新手、快速轉檔	無	免安裝，瀏覽器即可	低
Font Squirrel Webfont Generator	進階、需縮小中文字型體積	有，可調 subset	免安裝，網頁操作	中

中文字型檔通常較大，轉檔前先確認網路穩定，別在咖啡店爛 Wi-Fi 下轉一個十幾 MB 的字型，轉到一半斷線很煩。轉檔後務必把原始的授權文件一起留下來，很多人以為轉了格式就能重新主張授權，這是錯的，轉檔不改變授權狀態，原始字型免費可商用，轉出來的才可商用；原始要付費，轉出來一樣要付費。

這裡我要承認一個不確定的地方：Convertio 對超大型中文字型檔的處理偶爾會在免費額度上有限制，具體上限以 Convertio 官網當時公告為準，不在此寫死數字以免誤導。如果你常轉大檔，考慮付費方案或改用 Font Squirrel 比較踏實。想要更系統化地挑字型，可以把整體字型策略想清楚再下手，字型之於品牌的角色也值得先理一遍。

Divi 上傳自訂字型完整步驟（含 Divi 5 介面差異）

在 Divi 裡上傳字型的操作順序是：建立或開啟任一模組、切到 Design 設定欄、點 Title Font 或 Body Font 字型下拉、選上方 UPLOAD、匯入 TTF 或 OTF 檔並命名、完成後該字型出現在清單中即可套用。整段流程不需要寫任何程式碼。

1. 建立一個新模組，或開啟一個正在編輯中的模組。
2. 點選模組的 Design 設定欄，找到標題字型（Title Font）或內文字型（Body Font）欄位。
3. 點開字型下拉選單，會看到一長串內建字型清單。
4. 選擇清單上方的 UPLOAD 按鈕，進入自訂字型上傳介面。
5. 匯入準備好的 TTF 或 OTF 字型檔案，輸入字型名稱後按下上傳。
6. 上傳完成後，該字型會出現在全域字型清單中，可直接選用。

字型名稱建議用「英文加用途」的方式命名，例如 MyBrand-Title、ClientX-Body。這不是為了好記，是因為日後你要在多個模組重複套用同一個字型時，名稱清楚才能一眼找到。我也看過站長用中文字命名，結果在某些後台環境顯示成亂碼，後來全部重傳，白忙一場。

上傳後字型會存在 Divi 的全域字型清單裡，其他模組可以直接選用，不用每個模組重傳一次。這點很重要，很多人不知道字型是全域共用的，每開一個模組就重傳一次，把後台媒體庫塞滿重複檔案。全域清單的設計邏輯跟 Divi Cloud 雲端版型多站同步 的共享精神類似，一份資源多處取用。

移除字型也很直覺。到字型清單找到自訂字型，它旁邊會有一個垃圾桶圖示，點下去就刪除。刪除前確認沒有模組正在使用它，否則那些模組會退回預設字型。這跟 Divi 標題設計與字型樣式技巧 裡提到的標題字型設定是同一套操作介面，標題、內文、按鈕字型都走這個 UPLOAD 流程；行動版排版若要個別調整，Divi 手機版排序調整教學 是延伸閱讀。

至於 Divi 5 的介面差異要特別講一下。Divi 5 重寫了整個編輯器底層，UPLOAD 入口的視覺風格與位置有調整，整體更現代化，但操作邏輯跟舊版一致。詳細的介面變化可以參考 Divi 5 全新介面與操作體驗解析。如果你才剛升級、還不確定新版按鈕在哪，建議先在測試站操作一次，別直接在正式站上動刀。

解除 This File Type Is Not Permitted 的擋檔限制

當 Divi 上傳字型跳出「Sorry, This File Type Is Not Permitted for Security Reasons」，這是 WordPress 預設的檔案類型安全限制，不是 Divi 的問題。WordPress 出於安全只允許白名單副檔名，ttf、otf、woff 預設都不在內（依 WordPress 官方 allowed mime types 文件）。解法有兩條，一條是改 wp-config.php，另一條是用 functions.php 的 upload_mimes filter。

先說第一種，用 WP File Manager 編輯 wp-config.php。流程是：到後台外掛頁面搜尋 File Manager、安裝並啟用、在側欄點 WP File Manager、打開 public_html、找到 wp-config.php 後右鍵以 Code Editor 開啟，在檔案最底部加入這行程式碼。

1. 到 WordPress 後台「外掛」頁面，搜尋 File Manager，安裝並啟用。
2. 在側欄點選 WP File Manager，打開 public_html 資料夾。
3. 找到 wp-config.php 檔案，右鍵選擇 Code Editor 開啟。
4. 在檔案最底部貼上 define('ALLOW_UNFILTERED_UPLOADS', true); 並儲存。
5. 回到 Divi 重新上傳字型，成功後停用並刪除 File Manager 外掛。

加入的程式碼是 define('ALLOW_UNFILTERED_UPLOADS', true);。這行程式會讓 WordPress 跳過檔案類型過濾，等於把安全門整個打開，任何檔案都能上傳。它的風險在於「全面開放」，不只字型，連執行檔這類危險檔案也會放行，所以只能短時間、在受信任的環境用，用完一定要還原。

我個人更推薦第二種做法，用 functions.php 加 upload_mimes filter，只開放字型格式，風險低很多。做法是在子主題的 functions.php 加入一段 filter，把 ttf、otf、woff 加進允許的 MIME type 清單。子主題的建立可參考 Divi 子主題推薦與模板選擇，不要直接改父主題，升級時會被覆蓋。WordPress 的 MIME 白名單機制是官方設計的安全防線（依 WordPress 官方文件），用 filter 精準開放比全面關閉更符合安全原則。

把具體程式碼攤開來看會更清楚。可直接貼進子主題 functions.php 的範例程式碼如上，它只把三種字型副檔名與對應的 MIME type 加進 WordPress 允許清單，其他檔案類型的過濾行為完全不變。

add_filter( 'upload_mimes', 'allow_custom_font_upload' );
function allow_custom_font_upload( $mimes ) {
    $mimes['ttf']   = 'font/ttf';
    $mimes['otf']   = 'font/otf';
    $mimes['woff']  = 'font/woff';
    $mimes['woff2'] = 'font/woff2';
    return $mimes;
}

這段程式碼的關鍵在於它只追加、不覆寫。它把傳進來的 $mimes 陣列加上四個 key 之後原樣回傳，WordPress 既有的圖片、影片、文件白名單全都保留。貼上去之前確認你改的是子主題而不是父主題，否則下次 Divi 升級會把這段覆蓋掉。如果不確定檔案放哪，外觀 → 佈景主題編輯器裡能直接選到子主題的 functions.php，或用 FTP 把檔案抓下來改完再傳回去。改完回到 Divi 重新整理頁面，上傳 ttf 或 otf 就不會再跳出安全提示。萬一仍被擋，回頭檢查 MIME type 字串有沒有拼錯，font/ttf 與 application/x-font-ttf 都有人用，部分主機環境對格式字串較敏感，兩種都試一次是最快排除的方式。

還有一種更乾淨的長期方案是裝一支輕量的自訂外掛來放這段 filter，而不是塞進子主題。把字型相關的功能集中在獨立外掛，好處是換主題時字型設定不會跟著子主題一起被丟掉，管理上也更清楚哪些程式碼是為字型服務的。外掛只需要一個 php 標頭與上面那段 filter，加起來十幾行，放進 wp-content/plugins 啟用即可。這個做法對常換主題或同時維護多個 Divi 網站的接案者特別實用，一份外掛可以重複安裝到不同客戶站。

講到安全就不能不提備份。操作前先完整備份網站，這不是選配是必修。可以用 UpdraftPlus 自動備份設定教學 或參考 WordPress 備份外掛推薦評比 挑一套順手的，把整站檔案與資料庫都備下來。完成上傳後，把臨時安裝的 File Manager 停用並刪除，這類檔案管理外掛如果長期掛在站上又沒顧好權限，會變成資安破口。

網站安全的整體配置可併著 Wordfence 網站安全防護設定 與 WordPress 資安防護外掛評比 一起規劃，別只顧字型而把後門敞開。

做法	原理	風險等級	適用情境
wp-config.php 加 ALLOW_UNFILTERED_UPLOADS	關閉所有檔案類型過濾	高	短時間、受信任環境，用完即還原
functions.php 加 upload_mimes filter	只開放指定字型格式	低	長期使用，優先選此

ALLOW_UNFILTERED_UPLOADS 等於關閉檔案過濾，長期開啟風險高，優先選 upload_mimes filter。這個判斷不是我的個人意見，是 WordPress 官方 hardening 安全指南一貫的立場。兩種做法的差別，本質上是「全開」與「精準開」的差別。全開的做法等於把網站大門的保全撤掉，任何副檔名都能上傳，一旦你的帳號密碼外洩，攻擊者可以直接上傳惡意腳本檔把整站接管，這在新聞裡不是新鮮事。精準開的做法只把 ttf、otf、woff 這三種字型格式放進白名單，其他檔案類型依然被擋，等於只開了一條小縫給字型通行，風險可控得多。我自己的原則是，能精準開就絕不全開，哪怕全開只圖一時方便，長期下來都是在累積看不見的債。如果你對檔案管理工具不熟，WordPress FTP 檔案上傳與管理教學 也能幫你直接用 FTP 改 wp-config.php，不一定要裝 File Manager。順道一提，WordPress 外掛安裝三種方法 與 WordPress 佈景主題安裝教學 是處理這類後台操作的基本功，不熟的人先讀過再動手。

免費商用中文字型推薦與授權避坑

哪裡可以下載免費又能商用的中文字型？jf open 粉圓體、辰宇落雁體都是可免費用於商業用途的開源中文字型，下載前務必逐字閱讀授權條款，確認是否允許商業使用、改作與嵌入網頁。justfont 官網同時提供免費與付費字型，付費方案授權範圍更廣、支援更完整。

jf open 粉圓體是開源、可商用的圓潤風格字型，適合走親切路線的品牌，例如親子、餐飲、生活選物類網站。辰宇落雁體則是開源手寫風字型，可商用，適合文創、個人品牌、設計工作室這類需要溫度的情境。兩者都屬於這幾年逐步成熟的開源中文字型生態，授權條款可在 justfont 官方授權頁面查到。

• jf open 粉圓體：開源、可商用，圓潤風格適合親切品牌，授權詳 justfont 官方頁面。
• 辰宇落雁體：開源手寫風字型，可商用，適合文創、個人品牌。
• justfont 官網：同時提供免費與付費字型，付費方案授權範圍更廣、支援更完整。
• 授權檢查清單：是否允許商業用途、是否允許嵌入網頁（web embedding）、是否需標示作者。

授權怎麼看才不踩雷，我給自己列了一張檢查清單，每次下載都照著走一遍。第一，是否允許商業用途，這是底線。第二，是否允許嵌入網頁，有些字型允許印刷商用但不允許 web embedding，網站用途要看清楚。第三，是否需要標示作者，開源字型常要求保留出處，你可以在頁尾或關於頁放一行授權聲明交代。這套檢查邏輯跟 Logo 標準字的授權考量是相通的，挑品牌字型時一併檢查最穩。

反面案例要講一下。曾有公開案例顯示，未取得付費字型授權而商用會被求償，社群上一度討論得很熱，具體當事人與金額我不點名也無法逐一查證，重點是這種事真的會發生，不是嚇唬人。所以千萬別從來路不明的字型網站下載來商用，那些「免費字型大全」網站往往把付費字型重新打包，你用了等於你侵權。要找字型，走 justfont 這類官方或可信來源才踏實，看到喜歡的字型也回頭確認授權狀態再下手。

下載完之後也別急著傳，先確認字型包有沒有涵蓋你需要的語言字元集。多語系網站尤其要注意，若字型缺少某個語言的字元，前端會顯示成方塊，這在排版設計裡是常被忽略的細節。英文搭配部分可以併著中英字型的搭配邏輯一起規劃，那又是另一門學問。

本地託管與字型子集

用自訂字型會不會拖慢網站？會，中文字型檔案大確實會影響載入速度，但有辦法兼顧設計感與速度。做法是本地託管、字型子集化（只保留用到的字）以及設定 font-display。標題用設計感字型、內文用系統字型，是兼顧美感與速度最務實的折衷組合。背後的取捨邏輯其實很直觀：中文字型之所以檔案大，是因為中文字元數量遠多於英文，一套字型要涵蓋幾千個常用字再加上罕用字，體積自然膨脹。但你網站實際用到的字，往往只是其中一小部分，把用不到的字元剃掉，檔案可以縮到原本的幾分之一，這就是字型子集（subset）的價值。再搭配 font-display: swap 讓文字先以系統字型顯示，等自訂字型下載完再置換，訪客就不會盯著空白等。三件事一起做，設計感字型對首屏的影響可以壓到很低。

這層取捨不只是手感問題，而是會直接反映在搜尋與轉換數字上。Google 早在 2020 年就宣布將 Core Web Vitals 納入頁面體驗排名訊號，與行動裝置友善、HTTPS、侵入式插頁等既有訊號合併計算 [來源：Google Search Central Blog〈Evaluating page experience〉 https://developers.google.com/search/blog/2020/05/evaluating-page-experience 2020-05-28]。換句話說，字型載入拖慢的 LCP、INP 等指標，本身就在影響排名，這也是為什麼字型子集與 font-display 不該被當成可有可無的裝飾設定。

中文字型動輒數 MB 到十數 MB，全包上傳會明顯拖慢首屏，尤其手機網路下載這種大檔更慢。這裡的體積區間已經刻意模糊化，因為不同字型、不同字元涵蓋範圍差異很大，不掛精確數字以免誤導。解法是做字型子集（subset），只保留網站實際用到的常用字，檔案可以縮到原本的一小部分。Font Squirrel 的 subset 功能或 pyftsubset 這類工具都能做。

本地託管（self-host）比呼叫 Google Fonts CDN 更快也更隱私友善，符合 GDPR 對資料傳輸的要求。把字型檔放在自己伺服器，不把訪客資料往第三方 CDN 送，這在隱私法規日趨嚴格的現在是加分項。本地託管的整體思路與 Google Fonts 本機託管一致，你可以把那套觀念當作基礎來讀。

• 中文字型動輒數 MB 到十數 MB，全包上傳會拖慢首屏，建議做字型子集只留常用字。
• 本地託管比呼叫 Google Fonts CDN 更快也更隱私友善，符合 GDPR。
• 設定 font-display: swap，讓文字先以預設字型顯示，字型下載完再置換，避免空白閃爍。
• 搭配快取外掛與圖片壓縮一起優化，整體 Core Web Vitals 才會好看。
• 實務折衷：標題用設計感字型、內文用系統字型，兼顧美感與速度。

而把這些指標顧好，回報是可以量化看到的。web.dev 整理的案例顯示，Rakuten 24 投入 Core Web Vitals 優化後，每位訪客營收提升 53.37%，轉換率提升 33.13% [來源：web.dev (Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。字型載入佔的正是首屏體驗裡相當吃重的一塊，把字型子集、本地託管與 font-display 三件事做扎實，等於是把這份轉換紅利的基礎先打好。

設定 font-display: swap 是另一個關鍵。它的作用是讓文字先用系統預設字型顯示出來，等自訂字型下載完成再置換，避免訪客盯著一片空白等字型載入。這個小設定對感知速度的影響很明顯，尤其首屏。搭配 WP Rocket 快取外掛設定教學 與 WordPress 快取外掛推薦比較 一起優化，整體 Core Web Vitals 才會好看。

圖片端的優化也不能少，WordPress 圖片壓縮與延遲載入 能再擠出載入時間。速度指標的意義可參考 Core Web Vitals 指標與優化實戰，整體優化方向則回到網站速度的核心觀念去看。

說到底，效能與設計感不是二選一，而是取捨。我自己的做法是標題用設計字型（檔案小、只子集常用字），內文用系統字型或無襯線安全字，這樣既能有品牌識別，又不會把整站拖垮。這個取捨判斷與網站速度優化的整體思路一致，先顧首屏體驗，再談細節美化。如果你想知道目前網站速度落在哪個區間，網站速度測試工具與檢測平台 提供了完整的檢測方法。字型載入與頁面體驗除了影響傳統搜尋排名，也漸漸左右 AI 搜尋引擎抓取內容的方式，想理解這波趨勢可以從 llms.txt 是什麼與 AI 搜尋的關聯 看起。

字型之外，品牌能不能被看見還牽涉到外部提及與引用的追蹤。想確認自家品牌名稱在網路上被討論的熱度與出處，可以試著用 Ahrefs Brand Radar 監測品牌提及與引用 來掌握整體聲量分布。

常見問題與 troubleshooting 總整理

下面把 Divi 上傳與使用自訂字型的高頻問題一次整理，每題先給結論再說明做法。涵蓋格式判斷、上傳失敗、字型不顯示、行動版差異、Divi 5 相容性與字型移除等情境。

字型上傳成功卻不顯示，第一個檢查是不是選對模組字型欄位。Divi 的字型欄位分標題、內文、按鈕等，上傳到全域清單不等於自動套用到某個欄位，你要手動在對應欄位選用它。再來清除快取，確認瀏覽器有實際載入字型檔，有時是快取外掛卡住舊的 CSS，這類排查邏輯與快取外掛的疑難排解相通。

行動版字型跑掉，確認字型已上傳到全域清單，而且行動版模組設定沒有覆寫桌面版的字型選擇。Divi 的響應式設定允許桌面、平板、手機分別設定字型，如果你在行動版欄位選了別的字型，就會出現「桌面正常、手機跑掉」的現象。響應式排版的整體觀念可參考 響應式網頁設計 RWD 觀念，把手機版的字型與版面分開設定。

Divi 5 升級後字型遺失，是升級過程偶爾會發生的狀況。建議升級前先用 WordPress 備份與還原完全指南 的流程匯出 Divi 設定，升級後再重新匯入。移除字型則到字型清單找自訂字型旁的垃圾桶圖示，點下去即可刪除，刪除前確認沒有模組在使用。

多語系網站要特別留意字元集。確認字型包含所需語言字元集，否則缺字的部分會顯示方塊，這在排版設計裡有更細的說明。若你的網站走多語系，Polylang 多語系翻譯外掛教學 的字型搭配也是一併要處理的事。

回顧一下整個流程，從挑字型、看授權、轉檔、上傳、解擋檔、到效能優化，每一步都有各自的卡關點。Divi 品牌形象網站架設實戰 是從零開始架品牌網站的好起點，把字型策略放進更大的品牌脈絡裡思考。

設計應用端如 Divi 圖片懸停特效增加互動感 與 Divi 輪播外掛讓視覺更吸睛，也都依賴一致的字型策略支撐；動態效果可參考 Divi 視差滾動立體效果。

想做出有顏值的內容網站，可以參考 用 Divi 打造高顏值部落格 與 Divi 一頁式網頁設計實戰，Divi Supreme 模塊擴充功能評價 則補上原生模組做不到的細節。

設計應用端如 Divi 作品集設計教學、Divi 價目表設計技巧 與 Divi 分類篩選外掛教學，也都會回頭用到同一套字型設定。

如果你還在選主題階段，WordPress 頁面編輯器深度評測 與 Elementor 頁面編輯器完整教學 提供橫向比較，WordPress 頁面編輯與區塊操作 則是區塊操作的基本功。

配色與視覺相關的 網頁配色工具與色彩搭配 與 色彩心理學與品牌配色實戰，跟字型一起決定了網站的整體氣質。

Divi 自訂字型 FAQ 常見問題

Divi 可以上傳哪些字體格式？支援 WOFF 或 WOFF2 嗎？

只支援 TTF 與 OTF，WOFF 和 WOFF2 都不在 Divi 的接受範圍，這點可在 Elegant Themes 官方文件中查證。常見的解法是先把檔案轉成 TTF 再上傳。Google Fonts 抓回來的包大多夾帶 WOFF，直接傳會失敗，整體設計資源可從 網頁設計從零到一完整指南 拉出更大的脈絡。

怎麼把 WOFF 字型轉成 Divi 能用的 TTF？

Convertio 或 Font Squirrel Webfont Generator 都辦得到。只想快速拿到 TTF，Convertio 匯入、選格式、下載三步完事，不用安裝。要在轉檔同時做子集來瘦身中文字型，就選 Font Squirrel，Divi Marketplace 免費資源總整理 也能找到現成素材搭配。

Divi 上傳字型跳出 This File Type Is Not Permitted 怎麼辦？

訊息代表 WordPress 擋下了 ttf、otf、woff 這類預設不開放的副檔名，這是 WordPress 預設安全機制的行為。首選是在 functions.php 用 upload_mimes filter 精準放行字型格式；若臨時要快速通過，可在 wp-config.php 加 ALLOW_UNFILTERED_UPLOADS，但這是全面開放，用完務必還原。

如何讓 WordPress 允許上傳 ttf 與 otf 檔？

在子主題的 functions.php 加入 upload_mimes filter，把 ttf、otf 的 MIME type 加進允許清單即可。比起全面關閉檔案過濾，這種做法只開放字型格式，風險低很多，是長期可用的方案，相關的後台小工具設定可參考 WordPress 區塊小工具與側邊欄設定。

Divi 哪裡可以下載免費又可商用的中文字型？

jf open 粉圓體、辰宇落雁體都是可免費用於商業網站的開源中文字型，授權狀態可在 justfont 官方授權頁面查證。justfont 官網同時提供免費與付費字型，下載前務必逐字閱讀授權條款，確認是否允許商業用途與網頁嵌入。

用付費字型沒買授權會被求償嗎？

會。曾有公開案例顯示，未取得付費字型授權而商用會被字型公司求償。切勿從來路不明的字型網站下載商用，只走官方或可信來源，並保留授權證明；建立品牌視覺時，品牌官網設計與視覺建立 對資產合規也有完整說明。

Divi 上傳字型後要怎麼套用到標題或內文？

上傳後字型會進入全域字型清單。在任一模組的 Design 設定欄，打開 Title Font 或 Body Font 下拉選單，就能選到剛上傳的字型，選用後即套用到該模組，其他模組也可重複選用；若要把整站字型與版型一起規劃，用 Divi 主題從零架設公司官網 提供完整流程。

Divi 如何刪除已上傳的自訂字型？

到字型下拉清單找到自訂字型，它旁邊會有一個垃圾桶圖示，點下去即刪除。刪除前先確認沒有模組正在使用它，否則那些模組會退回預設字型；若想一次整理多個模組的樣式，Divi 頁首設計與現成套版、Divi 佈局版型與排版設計 與 Divi 高質感版型庫套用 提供現成版型可參考。

在 Divi 用自訂字型會拖慢網站速度嗎？

中文字型檔案大確實會影響載入速度，但可透過字型子集化、本地託管與設定 font-display: swap 來降低影響。最務實的折衷是標題用設計字型、內文用系統字型，兼顧美感與速度；WordPress 架站與 SEO 優化全攻略 也把字型載入列為基本 SEO 設定的一環。

Divi 5 介面下上傳字型的位置有改變嗎？

Divi 5 重寫了編輯器，UPLOAD 入口的視覺風格與位置有調整，但操作邏輯跟舊版一致：模組、Design 設定欄、字型下拉、UPLOAD、選檔、命名、上傳。不確定的話先在測試站操作一次，必裝的 Divi 外掛推薦清單 也能幫你在新版環境補齊功能。

什麼情況下不建議在 Divi 上傳自訂字型？

純長文內容站、只備一套中文字型的多語系網站、字型授權來源不明，以及主機資源受限又無法做子集的情境，都不建議硬上自訂字型。當品牌識別的收益蓋不過授權、效能與維護成本時，留系統字型才是專業判斷。

字型上傳成功卻不顯示，該如何排查？

依序檢查快取、前端載入、行動版與缺字四個點。先清快取重新整理；再用瀏覽器 Network 面板過濾 Font 確認檔案回應 200；接著切行動版預覽比對字型是否一致；最後逐頁掃過標題看有沒有方塊缺字。回應 404 多半是路徑或 MIME 問題，200 卻沒套用通常是模組字型欄位沒選到。

字型選用決策矩陣：哪種情境該上傳自訂字型

上傳自訂字型前先做一個簡單的情境分類，能避免無謂的維護成本。判斷依據有兩個軸：一是品牌識別需求的高低，二是預算與技術維護資源的多寡。把這兩軸交叉，會得出四個象限，每個象限適合的字型策略不同。

象限	品牌識別需求	資源條件	建議字型策略
一	高	充足	上傳付費授權的品牌標準字，標題與內文分離，做子集與本地託管
二	高	有限	改用開源可商用字型（jf open 粉圓體、辰宇落雁體），標題套設計字型、內文留系統字
三	低	充足	用 Divi 內建 Google Fonts 即可，重點放在字級與行距調整
四	低	有限	完全不碰上傳，靠系統字型與排版做出層次

第一象限的網站通常是已有完整 CIS 的中大型品牌網站，標準字型是品牌資產的一部分，不能被替代字型取代，這時投入授權費與子集工程是合理的投資。第二象限是接案設計師最常遇到的情境，客戶想要有設計感卻沒有購買字型的預算，開源字型正好補上這個缺口，只需花時間處理轉檔與子集。第三與第四象限的共同點是品牌識別需求不高，例如內容站、工具站、內部系統，這類網站把心力放在排版與可讀性，回報會比硬上自訂字型更高。

還有一條評分卡可以幫你快速決定要不要上傳。下列四個條件命中三個以上，就值得花十分鐘把自訂字型上傳做完：標題區需要呈現明顯的品牌個性；Logo 或印刷品已使用特定字型；站內有大量需要情緒引導的標題（如活動頁、產品頁）；客戶曾因字型問題提出退件或抱怨。命中不到兩個，則留在系統字型，把心力轉移到字級、行距與色彩對比，整體質感的提升反而更明顯。

什麼情況不該上傳自訂字型

自訂字型不是萬靈丹，有些情境硬上反而會帶來麻煩。第一種是純內容導向的長文站，這類網站的讀者要的是快速掃讀與可讀性，過度花俏的標題字型會干擾閱讀節奏，系統無襯線字搭配得當的字級，閱讀體驗往往更穩定。第二種是國際多語系網站卻只準備了一套中文字型，如果字型只涵蓋繁體或簡體字元集，其他語言的頁面就會出現方塊缺字，這時寧可走回系統字型，也不要冒缺字風險。

第三種是預算與授權來源不明的情境。如果你拿到的字型檔來路不明、找不到原始授權頁，貿然商用等於把侵權風險背在身上，這時不上傳才是安全選擇。第四種是主機資源極度受限的微型站，中文字型檔動輒數 MB，若是便宜的共享主機又沒做子集，首屏載入會被字型拖累，把自訂字型拿掉、改用系統字型，網站反而更快。簡單說，當品牌識別的收益蓋不過授權、效能與維護的成本時，不碰自訂字型才是專業判斷。

• 純長文內容站，閱讀體驗重於視覺個性，系統字型更穩定。
• 多語系網站只備了一套中文字型，其他語言會缺字，反而製造問題。
• 字型授權來源不明，無法確認是否可商用。
• 主機資源受限又無法做子集，大字型檔會拖垮首屏。

字型套用後的驗證與除錯流程

字型上傳成功只是起點，能不能正確顯示在訪客眼前才是結果。套用之後建議走一遍固定的驗證流程，把常見的顯示問題在正式上線前抓出來。流程分成四個檢查點：快取、前端載入、行動版、缺字。

1. 清除網站快取與瀏覽器快取，重新整理頁面，確認載入的是最新的 CSS 並排除舊的快取版本。
2. 開瀏覽器開發者工具的 Network 面板，過濾 Font，確認字型檔有實際被下載且回應 200。
3. 切到行動版預覽，檢查標題字型在桌面與手機是否一致，必要時分開設定桌面與行動版字型。
4. 逐頁掃過標題與內文，看有沒有出現方塊缺字，特別是較少見的字元與異體字。

第二個檢查點特別值得展開。在 Network 面板看到字型檔回應 404，通常代表檔案路徑錯誤或被安全規則擋掉，回頭確認上傳流程與 MIME 設定；看到字型檔回應 200 但頁面文字仍是系統字型，多半是 CSS 的 font-family 沒有正確指向自訂字型名稱，這時檢查 Divi 模組的字型下拉有沒有真的選到自訂字型，確認是套用而非僅上傳。回應 200 又正確套用，卻在行動版顯示不一致，則要檢查響應式設定，Divi 允許桌面、平板、手機各自指定字型，行動版欄位選了別的字型就會出現桌面正常、手機跑掉的現象。

缺字是最容易被忽略的一項。中文字型不一定涵蓋所有 Unicode 字元，冷僻字、異體字、罕用符號都可能缺。檢查方法是把網站實際會出現的標題文案逐字掃過，遇到方塊就記下字元，回頭換用涵蓋範圍更廣的字型，或針對該字元改用系統字型替代。多語系網站的檢查更嚴格，每種語言的頁面都要單獨走一次這個流程，因為一套中文字型幾乎不可能同時涵蓋其他語系的字元集。

症狀	可能原因	排除方法
上傳成功但畫面沒變	模組字型欄位沒選到自訂字型	到 Design 設定欄手動選用該字型
字型檔 Network 回應 404	檔案路徑錯誤或被 MIME 規則擋掉	檢查上傳流程與 upload_mimes 設定
桌面正常、手機跑掉	行動版欄位選了別的字型	在響應式設定統一各裝置字型
部分字元顯示方塊	字型未涵蓋該字元	換用涵蓋範圍更廣的字型或個別替代
首屏出現文字閃爍	font-display 未設為 swap	加入 font-display: swap 讓系統字型先顯示

回顧整個流程，Divi 上傳自訂字型的門檻不在按下 UPLOAD 那一秒，而在前面的格式轉檔與授權確認，以及後面的 WordPress 檔案類型安全限制與效能優化。格式轉對、授權讀清楚、擋檔用精準的方式解開、再做好子集與 font-display，這四步走完，中文字型就能穩定套用到網站上。