修復 WordPress 中 Kirki Webfontloader MIME 類型錯誤

Posted by Y Cheung on Sat, Apr 25, 2026

最近 Y Cheung 在 WordPress 後臺的發現有一個無法載入 kirki js 文件導致的錯誤,發生頻率很高,每個後臺管理頁面都會加載這個 js 文件但每次都找不到這個文件。

錯誤訊息

error cause by Kirki
You can see 404 error clearly.

1Refused to execute script from 'webfontloader.js' because its MIME type 
2('text/html') is not executable, and strict MIME type checking is enabled.

初步調查

乍看之下,這像是伺服器 MIME 類型設定錯誤,但真正的原因更簡單 — webfontloader.js 這個檔案根本不存在於伺服器上,所以伺服器回傳了一個 HTML 404 頁面,瀏覽器拒絕將其作為 JavaScript 執行。

關鍵線索

錯誤出現在每個後台頁面,Y Cheung 知道所使用的佈景主題使用了 Kirki,而目前 Kirki 外掛已更新至 v5.2.3 .

根本原因

深入研究 Kirki 5.2.3 的原始碼後,在以下路徑找到關鍵檔案:

1kirki/customizer/packages/modules/webfonts/src/Webfonts/Async.php

發現以下程式碼:

1if (self::$load || $wp_customize || is_customize_preview()) {
2    wp_enqueue_script('webfont-loader', URL::get_from_path(dirname(__DIR__) . '/assets/scripts/vendor-typekit/webfontloader.js'), [], '3.0.28', true);
3}

Kirki 5.2.3 刪除了 webfontloader.js,但沒有移除載入它的程式碼,估計可能不小心刪的?不清楚。5.2.2版本這個文件都還在的。這是 Kirki 本身的一個 Bug。系統預期在以下路徑找到該檔案:

1/kirki/customizer/packages/modules/webfonts/src/assets/scripts/vendor-typekit/webfontloader.js

但該檔案在外掛中已不復存在。

我們不能直接註解掉那行程式碼,因爲 webfont_loader_script() 中的內嵌腳本依賴於 webfont-loader 這個控制代碼:

1wp_add_inline_script('webfont-loader', 'WebFont.load({google:{families:[...]}})', 'after');

如果移除載入程式碼,Google 字體在前台也會無聲地失效。

修復方式

webfontloader.js 其實就是 Google/Typekit 的 Web Font Loader 函式庫。解決方案是在 Kirki 預期的路徑重新建立這個遺失的檔案:

1mkdir -p /wp-content/plugins/kirki/customizer/packages/modules/webfonts/src/assets/scripts/vendor-typekit/
2
3curl -o /wp-content/plugins/kirki/customizer/packages/modules/webfonts/src/assets/scripts/vendor-typekit/webfontloader.js \
4https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js

你也可以用 Github 上的 Webfontloader 檔案

這樣就修復好啦,不會再出現礙眼的error啦。其實平常 Y Cheung 在後臺操作的時候也不會無端端的就去看 console 有什麽錯誤,主要是最近的 spam bot 太多,一個特徵是狂爬一些不存在的路徑,於是 Y Cheung 就開始觀察 404 的log,結果抓到一堆自己家裏的 IP , 才開始找原因,才有動力來修復,啊哈哈哈。本來想找插件官方修復的,但是 WordPress 支持論壇上我看都沒相關人員在理大家的提的 issue ,就算了,誰讓咱們是免費用戶,沒人權呢。