如何以簡單的方式將自定義字體添加到 WordPress
已發表: 2015-05-22向您的計算機添加更多字體非常簡單。 只需將文件下載到您的字體目錄,然後您就可以開始在您選擇的軟件和應用程序中使用它們。
但是,如果您想在您的網站上使用自定義字體,尤其是訪問者可能沒有在他們的設備上安裝的那些字體,它會變得有點複雜。
值得慶幸的是,作為 WordPress 用戶,您可以使用一些很棒的免費工具將單個字體或整個字體庫添加到您的網站。 一旦您為您的主題提供了可用的字體,您就可以開始將它們應用到您網站上使用的各種樣式中。
在本文中,我們將向您展示在哪裡可以找到高質量的免費和高級字體,如何將它們添加到您的 WordPress 網站,以及一些工具來幫助您為網站上的每種字體選擇正確的設置。
在哪裡可以找到您網站的字體
在我們了解有關如何將自定義字體添加到 WordPress 網站的說明之前,讓我們看一下可以找到新字體以修改網站上文本外觀的一些地方。
有一些很棒的免費在線資源可用,您可以在其中找到可以在您的網站中自由使用的開源字體。 您可能想探索的一些資源包括:
- Google 字體:瀏覽 600 多種針對網絡優化的開源字體。 在您的 WordPress 網站上使用這些字體非常簡單,我們將在稍後介紹。
- Font Squirrel:另一個免費使用字體的大型存儲庫。
- Edge Web Fonts:由 Adobe Typekit 提供支持的免費 Web 字體集合。
- Typekit:Adobe 提供的 4,000 多種免費和高級字體的專業集合,可用於網絡和印刷。
如您所見,有大量合法的免費和高級字體在線資源,您可以使用它們來自定義 WordPress 網站的外觀。
網頁設計師的排版工具
為您的網站選擇正確的字體集可能很困難。 該過程不僅僅是選擇一種或兩種您喜歡的字體,然後將它們添加到您的網站。
您不僅要考慮字體的外觀,還要考慮您選擇的大小、網站內容區域的寬度以及每種字體的最佳行高是多少。
值得慶幸的是,您可以使用一些免費的在線工具來幫助您正確應用您選擇的字體。 這樣可以確保您的內容看起來最好。
在自定義網站上的字體時,您絕對應該快速查看一個在線資源,即黃金比例排版計算器。 這個排版工具來自 Thesis Framework 背後的人,可讓您輸入字體大小,然後輸入內容區域的寬度。 然後,該工具將為您的特定網站配置計算完美的印刷設置。
Type Scale 是另一種在線工具,可讓您輕鬆確定網站上不同文本樣式之間的相關大小。 輸入基本字體大小(例如網站上段落文本的大小)後,您將了解每個不同標題應設置的大小。
有多種比例可供選擇,包括上述黃金比例。 對設置感到滿意後,您可以快速復制 CSS以在您自己的網站上使用。
WordPress 自定義字體插件
就像有很多地方可以在線查找字體一樣,也有很多方法可以將它們集成到您的 WordPress 網站中。 但是,為了幫助您盡快入門,這裡有一些最好的 WordPress 字體相關插件:
簡單的谷歌字體
Easy Google Fonts 是一個免費插件,可讓您在 WordPress 網站上使用來自 Google 存儲庫的600 多種免費字體。 該插件與 WordPress Customizer 工具一起使用。 這使您可以在最終決定在您的網站上使用哪種字體之前預覽您的更改。
在您的網站上安裝並激活插件後,您可以開始更改當前 WordPress 主題使用的字體。 為此,請轉到 WordPress 定制器工具並單擊“排版”部分。
開箱即用,該插件可讓您更改主題使用的主要樣式的排版設置。 這可能包括段落和個別標題。 但是,通過 Easy Google Fonts 設置頁面,您可以創建自定義字體控件。 然後將它們添加到定制器界面,為您提供一種簡單的方法來更改列表、引號等元素使用的字體。
添加自定義字體控件後,您可以從定制器上的主題排版設置中訪問它。
通過使用插件的此功能,您可以修改 WordPress 主題的任何元素或樣式使用的字體。 添加到定制器的控件還包括字體粗細、文本修飾和變換屬性,以及字體顏色、背景顏色、大小、行高和字母間距。
通過將自定義字體控件與所提供的詳細設置相結合,Easy Google Fonts 插件在修改 WordPress 網站上的文本外觀時開闢了無限可能,而無需直接編輯任何代碼。
使用任何字體

強烈推薦使用上述 Easy Google Fonts 插件。 但是,它確實有一個缺點:您只能使用 Google 字體集合中的字體。 如果這 686 種字體都不吸引人,或者您想使用自定義字體,那麼同樣免費的 Use Any Font 插件是一個不錯的選擇。
安裝並激活插件後,您可以直接從您的計算機將一種或多種字體上傳到您的網站。 但是,在開始之前,您必須註冊免費的 API 密鑰(或進行捐贈),這會將插件連接到字體轉換工具。
一旦您上傳了至少一種字體,您就可以將其分配給您網站的特定元素。 這包括默認元素列表,以及您定義的任何自定義元素。
該插件還為 WordPress 帖子編輯器添加了一些字體控件。 這樣可以輕鬆更改帖子和頁面中使用的字體,單獨而不是全局。
分配字體後,您可以通過訪問網站的前端來查看對排版的更改。 雖然此插件的控件無法與 Easy Google Fonts 插件提供的控件進行比較,但如果您只想將主題的特定元素使用的字體更改為您選擇的自定義字體,那麼 Use Any Font 可以工作很好。
用於 WordPress 的 Typekit 字體
如果您想在您的 WordPress 網站上使用 Adobe Typekit 服務中的免費和高級字體,那麼免費的 Typekit Fonts for WordPress 插件就適合您。
使用這個插件,您可以使用預定義的選擇器,或者添加您自己的自定義 CSS 規則。 這確保了您想要使用 Typekit 字體個性化您網站的任何部分,您都可以使用此插件自由地執行此操作。
手動將自定義字體添加到 WordPress
如果出於某種原因,使用上述免費插件之一的想法沒有吸引力,您可以隨時手動更改 WordPress 網站上使用的字體。 如果您想使用的字體可以在 Google 字體存儲庫中找到,那麼將其添加到您的網站非常容易。
您只需在 Google 網站上選擇字體,然後將相關代碼複製到您網站的 head 部分和 CSS 樣式表中。
但是,如果您選擇的字體沒有託管在像 Google Fonts 這樣的存儲庫中,您可以在其中簡單地鏈接到它,那麼您將需要自己託管字體。 這會稍微改變過程並添加一些額外的步驟,例如將字體上傳到您的服務器。
您可以使用 FTP 軟件或網絡主機控制面板中的文件管理器工具上傳字體文件。 將字體上傳到專用字體目錄是個好主意,最好是在您的子主題文件夾中,以幫助保持井井有條。
一旦字體文件在您的服務器上,打開您的主題 CSS 樣式表文件進行編輯。 這可以在 WordPress 管理儀表板的外觀 > 編輯器屏幕上完成。
將上述 CSS 添加到樣式表以加載字體後,您可以在該 CSS 文件中的任何位置使用它來修改文本的外觀,如下所示:
出於性能原因,您應該盡可能嘗試鏈接到外部字體存儲庫,例如 Google 字體。 但是,如果您無法在線找到要使用的字體,您可能不得不通過自己託管文件來犧牲部分頁面速度。
結論
希望您現在知道在哪裡可以找到自定義字體,以及如何開始將它們添加到您的 WordPress 網站。 通過使用免費插件之一,例如 Easy Google Fonts,您不僅可以開始更改網站上使用的字體,還可以更改這些字體的呈現方式。
借助 WordPress Customizer 工具,您現在可以輕鬆更改網站上文本的外觀。 這一切都通過一組可視菜單進行,並帶有實時預覽。
如果您當前的主題無法讓您對網站上使用的字體進行太多控制,那麼通過使用上述方法之一,您現在可以輕鬆地進行這些更改,而無需自己編輯任何底層 CSS。
你最喜歡的字體是什麼? 您想更改網站上的哪些排版設置? 如果您對字體、排版或 WordPress 有任何疑問,請在下面的評論中分享。