自從本 blog 的 wordpress 升級並更換 theme 後，偶爾發現 page load 得很慢，用 chrome 自帶的 developer tool 查了一下才發現原來 theme 用了 google web font，因爲 google service 被牆了所以在大陸瀏覽就像卡住了一樣。由於我絕大部份時間都是科學上網，所以一開始沒有發現問題。
既然 google web font 不能用，最簡單就是乾脆不用，把相關代碼拿掉就行，不過這樣做的後果是網站會極其難看。上策還是把 google web font 放到 wordpress server，再將 CSS 配置好。Google 一下發現有個很棒的 shell script 能幫個大忙：https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/，它能幫你把需要的字體下載下來並產生一個立馬能用的 CSS 文檔。
WordPress 最少有兩個地方會加載 google web font，第一是 wordpress 本身用到的 Open Sans，另外是個別 theme 可能會用到的字體。視乎你的 theme 有沒有用 google font，有可能兩個地方都要處理。
目前我用的 theme 基於 twentyfourteen（我把原來左邊的 navigation 拿掉，header 加了 facebook, twitter 等幾個 icon），best practice 是在 wordpress 的 themes 目錄開一個叫
twentyfourteen-child的新目錄，裏面只放用來 override parent theme 的東西。
解決問題的具體步驟如下：
- 下載剛才介紹過的網站的 shell script，我把它命名爲
downloadgooglefont.sh
。 - 先下載 wordpress 會下載的所有 Open Sans 字體（包括不同粗幼和斜體），在
downloadgooglefont.sh
裏要指定它們：families+=('Open Sans:300') families+=('Open Sans:400') families+=('Open Sans:600') families+=('Open Sans:300italic') families+=('Open Sans:400italic') families+=('Open Sans:600italic') - 針對你使用的 theme，需要把 theme 用到的 google 字體寫進去。你要查一下你的 theme 會用到什麼字體，例如 twentyfourteen 會用到的字體在
themes/twentyfourteen/functions.php
的 215 行有提到：'family' => urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ),
總共有7個字體，所以 script 需要加上：
families+=('Lato:300') families+=('Lato:400') families+=('Lato:700') families+=('Lato:900') families+=('Lato:300italic') families+=('Lato:400italic') families+=('Lato:700italic') - 執行該 script:
$ bash ./downloadgooglefont.sh Downloading Open Sans:300... eot woff ttf svg Downloading Open Sans:400... eot woff ttf svg Downloading Open Sans:600... eot woff ttf svg Downloading Open Sans:300italic... eot woff ttf svg Downloading Open Sans:400italic... eot woff ttf svg Downloading Open Sans:600italic... eot woff ttf svg Downloading Lato:300... eot woff ttf svg Downloading Lato:400... eot woff ttf svg Downloading Lato:700... eot woff ttf svg Downloading Lato:900... eot woff ttf svg Downloading Lato:300italic... eot woff ttf svg Downloading Lato:400italic... eot woff ttf svg Downloading Lato:700italic... eot woff ttf svg
這些就是下載完的所有文檔，包括適用於 chrome/chromium, firefox, safari 會用到的字體，還有一個 CSS file:
Lato_300italic.svg Lato_300italic.ttf Lato_300italic.woff Lato_300.svg Lato_300.woff Lato_400italic.svg Lato_400italic.ttf Lato_400italic.woff Lato_400.svg Lato_400.ttf Lato_400.woff Lato_700italic.svg Lato_700italic.ttf Lato_700italic.woff Lato_700.svg Lato_700.ttf Lato_700.woff Lato_900.svg Lato_900.ttf Lato_900.woff LNM3t2QINm Open_Sans_300italic.svg Open_Sans_300italic.ttf Open_Sans_300italic.woff Open_Sans_300.svg Open_Sans_300.ttf Open_Sans_300.woff Open_Sans_400italic.svg Open_Sans_400italic.ttf Open_Sans_400italic.woff Open_Sans_400.svg Open_Sans_400.ttf Open_Sans_400.woff Open_Sans_600italic.svg Open_Sans_600italic.ttf Open_Sans_600italic.woff Open_Sans_600.svg Open_Sans_600.ttf Open_Sans_600.woff font.css
- 把上面所有的字體上傳到 wordpress server 的
wp-content/themes/twentyfourteen-child/
目錄。 - 把 font.css 複製到 wp-content/themes/twentyfourteen-chile/style.css。
- 由於 twentyfourteen 在
functions.php
通過wp_enqueue_style
加上fonts.googleapis.com
的 link 來加載 Lato 字體，要想辦法把它拿掉：// Add Lato font, used in the main stylesheet. wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );不過我不喜歡直接修改 parent theme，所以我選擇在 twentyfourteen-child 把它 dequeue 掉。注意 add_action 的 priority 必須低於 10，dequeue 才會成功。
theme_enqueue_styles
的前兩行是用來禁止 Open Sans 字體從 google server 加載，第3行才是禁止 Lato。
_twentyfourteen-child/functions.php
:
The post 解決 WordPress 中 Google Web Font 被 GFW 屏蔽問題 appeared first on Anthony Wong.
