如何為 WordPress 網站新增谷歌字型
您的網站使用了正確的字型嗎?
隨著移動端互聯網使用者的日益增多,網站字型已逐漸成為網頁設計師,出版商和零售商的重點關注物件。為此,BBC 和英國《衞報》近日推出了專為手機閲讀設計的新型字型,並調低了企業購買商業字型許可的相關費用。
當然,即使您並無龐大的預算,您同樣可以更新站點字型以獲得更棒的閲讀體驗,為瀏覽器和裝置設計相一致的外觀,並進一步降低頁面載入時間以助您提升 SEO 站羣排名。
何種字型最適合您的站點?
無論您是設計愛好者或熱衷於嘗試所有新奇事物,您都將在網站字型上開啓新世界的大門。日前,網絡上已有成千上萬種開源字型可供下載和使用,使用者可以購買其中幾千種字型。
由於您希望網站字型易於載入和使用,那麼您最好只在谷歌字型庫中進行挑選。谷歌字型庫是一種開放原始碼的字型儲存庫,其中提供的字型加速緩存迅速,頁面載入時間短,非常方便使用者在小螢幕上閲讀。截至目前,谷歌字型庫共提供近 848 種字型系列,其中 823 種系列適用於英文文字。
如何為 WordPress 網站新增谷歌字型
 
因此,為縮小可選範圍,您需要遵循供職於 Canva 的 Janie Kliever 提出的字型選擇基本原則:
2-3 種字型是多數站點的理想數量。如果您堅持只選用一種字型,您的網站可能看上去千篇一律,訪客也很難區分標題和主要內容。然而,一旦您選用的字型超出 2-3 種,整個網站不僅看上去雜亂無章,也會給使用者留下不專業的印象。
選擇有對比度的字型,建立視覺層級。比如,您可以使用粗體或襯線(serif)字型打造醒目標題,並採用簡單的 sans serif 字型作為主要正文,要知道,這些字型完美支援智慧手機掃描。
此外,Google Design 提供了排印和字型的詳細概述,當然,您也可以在挑選網站字型:新手指南中為您的網站找到最適合的字型。其中,您應該注意以下幾點:
該網站是準備長期運營還是短期運營?長期運營的網站需要安裝不同風格的字型系列。
該網站的文字塊篇幅多長?如果文章通常包含五個或更多段落,相信襯線字型是個不錯的選擇。
該網站常用的字號?越簡單的字型在小號字型下更容易閲讀,但是作為標題可能不夠醒目。
該網站訪客會選擇其他語言版本嗎?如果答案是肯定的,您需要選擇支援多指令碼字元的字型系列,以正確顯示各語言版本。
最後,該指南還針對特定場景為讀者推薦了幾款熱門字型,希望對您有所啓發。當然,您也可以點選這裏瀏覽全部谷歌字型。
挑選適合自己網站的谷歌字型
當您遍覽谷歌字型庫時,面對著這繁雜的目錄,您可能一時無法找到適合自己的網站字型。比如,以幫助寵物照料網站尋找字型為例,我們想為該網點的標題找到醒目、專業且充滿詼諧元素的襯線字型。
首先,定位谷歌字型庫中的搜索過濾側邊欄。在這裏,您可以選擇襯線字型類別,並根據年齡,熱門程度或按名稱的字母順序來過濾目標字型。
接著在語言欄中,您可以選擇 “拉丁” 選項挑出支援英文的全部字型(您可能有點疑惑,但我們的確使用拉丁字母表)。
然後,您可以選中對應的核取方塊以開啓滑動選單,並根據不同風格(如輕字型,加粗或斜體等字型變體),厚度,傾斜度和寬度對選項進行微調。
在選定 “serif” 和 “Latin” 後,您便為這家寵物照料網站挑選出了 174 種標題字型,不過感覺 Bree Serif 的效果最好。為預覽網站文案,您需插入遊標,清除虛擬文字,並輸入 “我們的寵物照料服務選單” 以替換預設文案。(當然,您也可以點選 “應用所有字型” 按鈕以避免重複輸入。)
您不僅可以使用滑塊選單在 8-112 畫素之間調節字型大小,而且還能夠使用左側的下拉選單預覽文案的句、段呈現效果,或者字母和數字在對應字型下的外觀。
此外,別忘記點選 “+” 按鈕將 Bree Serif 加入底部的字型常用欄,在這裏,您可以收集一些您偏愛的常用字型。當您準備最後的安裝時,請點選黑色的選項欄,HTML 和 CSS 代碼將為您的網站安裝字型。總之,您可以盡情下載喜歡的字型,但是由於下載會佔用一定的時間和網站空間,谷歌通常建議您不要過多下載。
如何在您的網站上使用谷歌字型?
如果您願意向網站新增代碼,則可以根據 Google Fonts API 入門指南,參照樣式表選擇網站所需的字型系列和樣式。此外,您還將瞭解如何優化字型以顯著減少標題和 logo 的字型檔案大小。
相反,對於那些不願意程式設計網站代碼的使用者來説,他們可以安裝相應的 WordPress 插件外掛,讓其幫助自己安裝並管理谷歌字型。而其中最為著名的要屬 Easy Google Fonts,迄今已逾 30 萬次下載。安裝這款插件外掛之後,您不僅可以免去程式設計站點主題代碼的煩惱,同時還可以獲得一份谷歌字型大全,再也無需手動選擇和下載任何字型。
Easy Google Fonts 在 WordPress 儀表盤的自定義版塊新增了字型選單,在這裏,您可以為您站點主題的不同標題和文案搭配對應的字型,風格,顏色和其他文字元素。
您可以檢視網頁變更的實時預覽,訪客登入後只能看到您儲存和應用之後的效果。為變更非主題預設控制元件的文字元素,Easy Google Fonts 支援使用者建立自己的字型控制元件,而該控制元件將顯示在 Typography(字型排印)選單中。當您選定想用的谷歌字型,並確定預覽顯示正常,這時您可以儲存和應用此次變更,以實時更新您的網站。
更新字型,升級網站
要知道,更新站點字型不僅意味著賦予網站全新的外觀,其實還為訪客提供了更為優秀的使用者體驗。尤其在這個智慧手機撐起半邊天的時代,要想為網站贏得大量的回頭客,設計載入迅速的字型以提升受眾閲讀體驗堪稱實現這一目標的不二法寶。
 
相關閲讀:WordPress 主機比較常見的問題