將自定義字體添加到 WordPress 網站主題的 3 種不同方法

有許多有趣且可自定義的方式可以讓您的 WordPress 網站看起來更獨特、更具視覺吸引力。 其中一種方法是將自定義字體添加到您的 WordPress 網站。 看看你的一些競爭對手的網站。 他們可能會模仿您也希望通過自己的 WordPress 網站創建的相同基調和風格。 注意他們使用的字體。 許多成功的網站傾向於使用少數精心挑選的字體，這些字體在整個網站中始終如一地使用。

網上有很多免費的自定義字體，您可以輕鬆地將它們添加到自己的網站中。 找到合適的字體後，您將需要知道如何將它們應用到您的網站。 您可以嘗試多種方法來實現這一目標。

首先，找到合適的字體； 有無數的網站提供數以千計的免費字體供您下載。 試試谷歌字體、TemplateMonster、MyFonts、FontSpring、Cufonfonts、Dafont、Font Squirrel、Edge Web Fonts、1001 Free Fonts、Fonts.com。

簡而言之，有兩種主要方法可以將自定義字體添加到您的 WordPress 網站：手動或使用插件。

手動將自定義字體添加到您的 WordPress 網站主題

如果您不想冒險使用太多插件使您的 WordPress 網站負擔過重，手動將自定義字體添加到您的 WordPress 可能是有益的。 這可以通過編輯@font-face 指令來完成。 這允許您將任何格式的多種字體連接到您的站點。

這涉及以下步驟：

步驟1

首先，從您認為最有用的網站下載您選擇的自定義字體。 將文件保存到您的計算機後，解壓縮此 .zip 存檔。

第2步

在此之後，您可以將此字體文件上傳到您的 WordPress 託管服務器中的“wp-content/themes/your-theme-folder/fonts”目錄下。 如果您還沒有為您的自定義字體設置一個指定的文件夾，請創建一個並將其保存在那裡。

步驟 3

接下來，前往 WordPress 的管理區域。 選擇外觀，然後轉到主題編輯器。 此時，您將在屏幕上看到主題的 style.css 文件。 在此之下，您將需要添加這部分代碼：

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

請記住將代碼中的“URL”和“font-family”替換為與您選擇的字體相對應的適當值。 您還應該將這部分代碼粘貼在 CSS 文件的開頭，但在主題註釋之後。

步驟4

最後，確保單擊重要的更新文件按鈕。 這可確保在您離開頁面之前正確保存您的更改。

步驟 5

在此之後，您可以輕鬆地在您想要在主題樣式表中應用它的任何其他地方使用該字體。 使用以下代碼：

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

現在您已經編輯了這個字體代碼，只要有人訪問您的網站，字體就會加載。 但是您還沒有將它應用到頁面上的任何特定元素。 為此，您需要對剛剛訪問的相應 style.css 文件進行最後一次編輯。 您需要在文件中輸入如下代碼：

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

為您推薦：初學者指南：如何安裝 WordPress 主題？

快速說明：

請記住，和以前一樣，編輯 font-family 值以適合您正在使用的字體。

例如，如果您使用 Google Fonts 中的自定義字體，您會看到一個名為@import 的選項卡，它為您提供了相關代碼，只需將其複制並粘貼到主題的 style.css 文件中即可。 如果您不習慣處理過多的編碼，這可以使整個過程變得更加簡單。

但是，這不再是強烈推薦的方法。 它遇到了一些性能問題，阻止瀏覽器同時下載多個樣式表。 這最終會導致頁面加載速度變慢。 因此，當您選擇字體和使用它們的方法時，請記住這一點。

另一方面，通過 CSS 手動安裝自定義字體確實允許您連接多種格式的字體，包括 SVG、WOFF、TTF 和 OTF。 此方法還允許您在不依賴第三方服務的情況下工作。 您的字體文件將位於您的服務器上。 這是向 WordPress 添加自定義字體的最直接方式。

使用插件將自定義字體添加到您的 WordPress 網站主題

許多人選擇使用插件將他們的自定義字體包含到他們的 WordPress 網站中，因為在許多方面這可能是最簡單的方法。 如果您不想處理 CSS 編碼，則尤其如此。 谷歌字體是一個受歡迎的選擇，主要是因為它可以很容易地與 WordPress 插件一起使用。 最適合您的兩個選擇是 Easy Google Fonts 和 Google Fonts Typography。 一旦激活了這些插件中的任何一個，您就可以輕鬆訪問整個 Google Fonts 字體目錄以添加到您的頁面，而無需處理任何復雜的代碼。

使用 Google 字體是最簡單的方法，您可以在屏幕上實時預覽您的更改和自定義字體。

根據您要使用的字體文件以及您是否打算使用單個存儲庫，您可能需要考慮使用替代插件，例如 Custom Fonts 插件。

步驟1

一旦你安裝了你選擇的插件並激活它，進入外觀，然後點擊進入定制器頁面，這將打開實時 WordPress 主題定制器界面頁面。 在這裡您將看到排版選項卡，它將向您顯示您自己網站的每個部分，您可以在其中應用您自己的自定義字體。

第2步

打開此頁面後，您將能夠單擊要開始編輯的頁面部分中的“編輯字體”按鈕。 然後您可以完成各個子部分，選擇字體樣式、大小、邊距等——這些部分將根據您使用的主題而有所不同。

您的主題還可能意味著您將無法直接編輯您網站各個部分的字體選擇。 然而，這個問題有一個簡單的解決方法：只需前往“設置”，然後是“谷歌字體”，您可以在其中創建自己的字體控件。 為此，只需在框中輸入控件名稱並選擇 CSS 選擇器。 這允許您添加任何您想要為此字體定位的 HTML 元素。 輸入此信息後，請確保通過單擊“保存字體控制”按鈕保存更改，以便您的設置完全更新。 然後，您可以繼續為 WordPress 網站的每個不同部分創建盡可能多的自定義字體控件。

步驟 3

要在創建這些新字體控制器後使用它們，只需返回“外觀”部分，單擊“自定義程序”，然後單擊“排版”選項卡。 在此之後，您將看到標有 Theme Typography 的選項 - 當您單擊它時，您將能夠通過簡單地選擇 Edit 按鈕來訪問您的自定義字體控件，這樣您就可以為這個特定的字體選擇您想要的字體和外觀控制。 再次強調，不要忘記保存您的更改，方法是單擊“發布”或“保存”按鈕來更新您的網站。

快速說明：

我們推薦的其他一些很棒的自定義 WordPress 字體插件是 Custom Font Uploader 和 Use Any Font – 但還有無數其他字體可供選擇，因此在選擇您想要使用的插件之前先探索您的選項。

您可能還喜歡： 20 個最暢銷的微型 WordPress 主題。

最後，嘗試使用主題

除了這兩種向您的 WordPress 網站添加自定義字體和排版的主要方法外，您還可以使用您可以選擇的主題。 有許多可用的主題，其中許多都帶有內置選項，可讓您自定義已安裝的字體。 這樣做的過程會因您使用的主題而異。 因此，請務必查找適合您主題的指南。 高質量、優質的 WordPress 主題還將提供可在線訪問的文檔，這些文檔提供了向該特定主題添加自定義字體的指南。

視覺和設計元素可以說是創建有效網站的最重要因素之一，該網站將吸引每個訪問者的注意力。 該領域最大的特點之一是字體的使用。 無論您選擇哪種方式將自定義字體添加到您的 WordPress 網站，您都應該找到並使用最適合您整個網站和品牌的風格、受眾、內容、主題和基調的字體。

 本文由比阿特麗斯比爾德撰寫。 Beatrice 是 Academic Brits 的專業文案撰稿人，擅長廣泛的主題和學科領域。 比阿特麗斯總是樂於分享她的個人經驗，並向初學者作家提供專家建議，以發現創作真正暢銷的高質量內容的所有挑戰和特點。