首頁 » 網站架設相關 » 架站教學 » [Google Fonts]主題14:如何托管Google Fonts在WordPress本機內?

[Google Fonts]主題14:如何托管Google Fonts在WordPress本機內?

主題:改變Google Fonts的存取位置

目前Wordpress(WP)中的外掛與佈景主題, 有些會整合Google Fonts在裡面,即使有時會用不到它, 但還是會有[外部請求]此資源的時候, 而這些外部請求就有可能會影響到WP主機的載入時間, 簡言之, 就是會有效能的降低.

挑選新的Google Fonts

一開始點選下方連結到Google Fonts網頁中挑選要改變的字型.

網址:Google Fonts

在紅色框中選擇合適的語言[Chinese-Traditional],  選擇之後就會出現Noto Sans(思源黑體)Noto Serif (思源宋體)這二個家族.

這裡以Noto Sans(思源黑體)為示範!

然後按下[Download family]之後, 就可以把思源黑體整個家族的字型都免費下載回來使用.

解壓縮之後, 挑選NotoSansTC-Regular.otf這個字型, 其他檔案名稱以粗體大小不同而分類.

轉換不同格式的字型WOFF/WOFF2

點選下方的連結, 就可以轉換WOFF/WOFF2的格式了.

網址:轉換字型格式

WOFF-(Web Open Font Format), 從字面可以很清楚知道是用於網頁上的字型格式. 比較新的瀏覽器都會有支援WOFF2, 較舊的瀏覽器版本可能沒有支援, 就會使用WOFF這個格式檔.

進入轉換字型網站之後, 把需要的檔案, 直接在點選[Add fonts]加入, 預設會勾選WOFF/WOFF2這二種為主流格式, 然後確認無誤之後, 按下[Convert]就可以在線上做轉換了.

完成之後, 就會在左下方有一個[Download]按鈕出現, 點選之後下載回去就可以了.

解開上一個步驟所下載的檔案之後, 裡面會有4個檔案, 最重要是轉換後的WOFF/WOFF2這二個檔案.

開啟stylesheet.css檔案, 可以看到有三個紅色框所標示的區塊是後面要更改的位置.

上傳到Wordpress server中

再來就是把那二個檔(WOFF/WOFF2), 上傳到Wordpress server 中的位置. 這裡把它們放到下方路徑裡.

0-fonts:新資料夾的名稱

//test3/wp-content/uploads/0-fonts/

更改字型的完整路徑

在第一個紅色框中加入此字型的家族名稱, 以利之後要套用的名稱.

第二個/第三個紅色框中,  就是修改這二個字型的完整路徑或是有使用CDN的路徑.

font-family: ‘NotoSerifTC‘;
src: url(‘https://yourdomain.com or CDN URL/wp-content/uploads/0-fonts/NotoSerifTC-ExtraLight-Alphabetic.woff2′) format(‘woff2’),
url(‘https://yourdomain.com or CDN URL/wp-content/uploads/0-fonts/NotoSerifTC-ExtraLight-Alphabetic.woff’) format(‘woff’);

font-weight / font-style /font-display 這三個就照原本的stylesheet.css裡的內容, 直接複製貼上即可.

其他的就套用所需要位置就可以, 例如:body/h1/h2…等等.

[溫馨提醒]

font-family:’Noto Sans TC’ 除了這個web fonts之外, 也需要加入web safe fonts(Arial / Sans-serif..etc).

web safe fonts–> 在瀏覽者的裝置或是系統中, 本身就已經先安裝好此字型, 無需再下載!

開發者工具中確認字型位置

利用Google Chrome瀏覽器開啟網頁之後, 然後按 [Ctrl+Shift+i] 組合鍵後, 就會出現開發者工具的畫面, 選擇Network, 然後搜尋欄中輸入fonts,重新更新畫面, 就可以知道目前網頁所使用的字型有哪些了!

可以看到右下方的紅色框裡, 有外部請求的命令, 這個可能就會影響網頁載入的時間了!

關閉內建已整合的Google Fonts with plugins

到這裡為止, 已經加入自訂的Google Fonts了, 且也設定好所需的字型. 但是在佈景主題中, 可能還有原先整合到裡面的Google Fonts, 所以可利用外掛方式去關閉它.

這裡提供幾個外掛程式來使用.

  • OMGF-Optimize My Google Fonts
  • Autoptimize 
  • Disable and Remove Google Font

OMGF-只要勾選不需要用的字型就可以了, 然後按下[Save & Optimize]就完成移除內建的Google Fonts.

Autoptimize-點選外掛Settings–>Extra, 勾選Remove Google Fonts就可以了.

Disable and Remove Google Fonts– 此外掛安裝且啟用之後, 不需設定就完成了.

關閉內建已整合的Google Fonts with codes

除了減少外部請求的需要, 使用外掛數量過多也是會影響網站整體的效能, 所以不使用外掛方式, 可以利用代碼來完整移除Google Fonts.

因為代碼中需要一個keyword, 且每一個佈景主題中所需的名稱也不盡相同, 所以利用OMGF這外掛來找尋.  這是一開始OMGF的外掛畫面, 直接點選紅色框中的[Start optimization]按鈕, 就會產生stylesheet handle的名稱, 可以看到 [colormag_googlefonts] 就是所需的關鍵字!

增加代碼

先到網站主機內, 找尋佈景主題的位置, 然後編輯[functions.php]這個文件, 大多都是以下路徑:

//public_html/wp-content/themes/使用中的佈景主題名稱/

加入下方的代碼, 就完成了.

//disable-google-fonts-from-theme 
add_action( 'wp_print_styles', 'disable_google_fonts_style' );
function disable_google_fonts_style() {
      wp_dequeue_style( 'colormag_googlefonts' );
}

[溫馨提醒]

修改任何佈景主題內的文件時, 建議使用子佈景主題, 以避免造成網站不正常!

最後別忘了清除網站內的cache, 再次回到Google Chrome中, 檢查是否還有其他Google Fonts的外部請求, 也順便確認挑選的字型是否在本機上使用.

總結:

挑選喜歡的字型樣式, 以及移除內建整合的Google Fonts, 可以改善網頁載入的速度, 至少能減少外部請求資源的數量, 讓網站的效能更加改善!

以上僅供參考!

Share via:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *