天天看點

WordPress 的 Google 字型問題解決辦法

在國内通路的時候,WordPress 裡面引用的 google 字型可能會導緻加載速度變得很慢。

要修改的地方有(我使用的版本是 4.0):

wp-includes 裡面的 script-loader.php 有一行:

$open_sans_font_url = "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";      

你使用的主題裡面的引用,以我用的 twentytwelve 主題為例:

在:wp-content/themes/twentytwelve/functions.php 裡面有一行:

$font_url = add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" );      

把這些裡面的 fonts.googleapis.com 替換成 fonts.useso.com。

但是我直接浏覽器通路 fonts.useso.com 後發現這個服務是 360 做的。

。。。

如果不想依賴 360 的服務怎麼辦?

Update:

現在隻要使用 這個工具 可以直接打包下載下傳字型,生成對應的 css 源碼,放到伺服器上即可。

我的解決方法是手動下載下傳 .css 和所有其中引用的 woff2 字型檔案,然後存在自己的伺服器上(但此法的問題是如果你更新了,或者安裝了新主題,就可能會導緻字型找不到)。 

具體步驟:

1.首先從代碼得到所有對 google 字型請求的參數,或者使用浏覽器的開發者工具監聽對 fonts.googleapis.com 的請求。并組合起來自己用浏覽器請求一次,得到一個 css。

比如看到有這兩個:

?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin,latin-ext
?family=Open+Sans:400italic,700italic,600italic,400,700&subset=latin,latin-ext      

那麼就自己用浏覽器通路

https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700&subset=latin,latin-ext      

得到一個 css 檔案,包含了兩處引用都需要的資源。

2.使用文本編輯器在裡面搜尋出所有字型的靜态連結。

我使用的是 Sublime Text,在裡面進行正規表達式搜尋,我的搜尋條件是:

https://fonts.gstatic.*?.woff2      

把它們複制出來

https://fonts.gstatic.com/s/opensans/v10/K88pR3goAWT7BTt32Z01m5Bw1xU1rKptJj_0jans920.woff2
https://fonts.gstatic.com/s/opensans/v10/RjgO7rYTmqiVp7vzi-Q5UZBw1xU1rKptJj_0jans920.woff2
https://fonts.gstatic.com/s/opensans/v10/ttwNtsRpgsxVmgGGmiUOEpBw1xU1rKptJj_0jans920.woff2

.......      

粘貼到下載下傳工具裡面(如迅雷),批量下載下傳。

3.字型檔案和 css 全部上傳到你自己的伺服器。

4.把 css 檔案裡面的連結查找替換成在你伺服器上的位址。

5.最後把 wordpress 裡面的引用 fonts.googleapis.com 的連結替換成你自己的位址。

完成。