[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, 可以改善網頁載入的速度, 至少能減少外部請求資源的數量, 讓網站的效能更加改善!
以上僅供參考!
