WordPress 禁用 Google Fonts 加速訪問：插件與代碼雙方案

WordPress 禁用 Google Fonts 加速訪問：插件與代碼雙方案

因 Google 服務在中國大陸不可用，WordPress 主題/插件引用的 Google Fonts (`fonts.googleapis.com`) 會導致頁面長時間白屏等待（瀏覽器并發連接限制、TCP 超時重傳）。本文提供插件級與代碼級兩種徹底禁用方案，實測首屏加載提速 3-10 秒。

方案一：安裝插件（最簡單、適合非技術用戶）

1. 后台 → 外掛 → 安裝外掛 → 搜索 「Disable Google Fonts」 或 「Remove Google Fonts」。
2. 推薦：Disable Google Fonts (by Milan Dinić) —— 輕量、無設置、激活即生效，通過 wp_dequeue_style 移除所有 Google Fonts 隊列樣式。
3. 或 Autoptimize 開啟「移除 Google Fonts」選項（同時合并壓縮 CSS/JS）。

方案二：代碼級禁用（主題 functions.php，無插件依賴）

<?php
// 1. 移除核心/主題/插件註冊的 Google Fonts 樣式
add_action('wp_enqueue_scripts', function() {
    global $wp_styles;
    if ($wp_styles) {
        foreach ($wp_styles->registered as $handle => $style) {
            if (strpos($style->src, 'fonts.googleapis.com') !== false ||
                strpos($style->src, 'fonts.gstatic.com') !== false) {
                wp_dequeue_style($handle);
                wp_deregister_style($handle);
            }
        }
    }
}, 999); // 極高優先級確保最后執行

// 2. 移除編輯器/后台引用的 Google Fonts（可選）
add_action('admin_enqueue_scripts', function() {
    wp_dequeue_style('open-sans'); // 核心后台字體
    wp_deregister_style('open-sans');
});

// 3. 替換為本地/國內鏡像字體（可選，保持設計一致性）
add_filter('style_loader_src', function($src, $handle) {
    if (strpos($src, 'fonts.googleapis.com') !== false) {
        // 替換為 360/清華/字體天下等鏡像
        return str_replace(
            ['fonts.googleapis.com', 'fonts.gstatic.com'],
            ['fonts.loli.net', 'fonts.gstatic.loli.net'], // 示例鏡像，請用可用鏡像
            $src
        );
    }
    return $src;
}, 10, 2);
?>

方案三：Nginx/Apache 反向代理（服務器層，全站生效）

# Nginx
location /fonts.googleapis.com/ {
    proxy_pass https://fonts.loli.net/; # 或其他可用鏡像
    proxy_ssl_server_name on;
    proxy_set_header Host fonts.googleapis.com;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

驗證效果

1. 瀏覽器開發者工具 → Network → 過濾 fonts.googleapis.com，確認無請求或狀態 200 (鏡像) / 304 (緩存)。
2. PageSpeed Insights / GTmetrix 測試首屏時間、總加載時間對比。

常見問題

Q: 禁用后圖標字體 (Font Awesome) 也壞了？

A: Font Awesome 默認走 fontawesome.com 或 cdn.jsdelivr.net，非 Google 域名。檢查主題是否誤用 Google Fonts 載入 FA，修正為官方 CDN。

Q: 插件啟用后前端樣式亂了？

A: 部分主題強依賴 Google Fonts 字體族（如 font-family: 'Roboto', sans-serif;）。解決：1) 在 CSS 中提供回退字體 font-family: 'Roboto', 'Microsoft YaHei', 'PingFang SC', sans-serif;；2) 下載字體文件本地化部署（@font-face）。

Q: 怎麼知道哪個外掛/主題引入了 Google Fonts？

A: 搜索代碼庫 grep -r "fonts.googleapis.com" wp-content/，或用 Query Monitor 外掛查看樣式隊列來源。