如何將離線字體添加到您的 WordPress 網站

已發表: 2022-10-31

如果您希望為您的 WordPress 網站添加一些額外的個性，那麼您可能需要考慮加載離線字體。 雖然有很多方法可以做到這一點，但我們將向您展示使用 Font Squirrel Webfont Generator 的最簡單方法之一。 下載字體文件後，您可以將它們上傳到 WordPress 網站並像使用任何其他字體一樣使用它們。 讓我們開始吧！

這篇文章已經在我的辦公桌上放了很長時間了，我想和你分享一下。 Google 字體在本地完全加載。 到目前為止，我一直在使用來自 Crunchify.com 的 Google 字體 Oswald 和 Lato。 只需打開出現在新標籤中的上圖中的 URL，您就會注意到它已經生成了 14種新字體。 如果您有以下任何問題，本教程也會有所幫助。 解壓縮 Lato.zip 文件後，您將能夠看到所有 10 種帶有 .ttf 擴展名的 Lato 字體。 在大多數網站上，您只需要常規、粗體和斜體字體。

在第 2 步中，您現在必須將字體轉換為 woff2、eot、svg、ttf 和 wof 格式。 可以將文件上傳到站點 https://Font-Converter.net/en ，它將字體轉換為這些格式。 沒有什麼需要說的了。 您現在可以從本地文件系統加載字體。

如何將自定義字體添加到 WordPress 主題？

圖片來源：pinimg.com

有幾種不同的方法可以將自定義字體添加到 WordPress 主題中。 一種方法是使用 Google 字體庫。 您可以在 Google 字體網站上找到所有可用字體的完整列表。 找到喜歡的字體後，您可以將代碼添加到主題的樣式表 (style.css)。 例如，如果您想使用“Open Sans”字體，您可以在樣式表中添加以下代碼： body { font-family: 'Open Sans', sans-serif; 將自定義字體添加到 WordPress 主題的另一種方法是使用Easy Google Fonts之類的插件。 這個插件可以輕鬆地將自定義字體添加到您的主題中，而無需編輯任何代碼。

Easy Google Fonts 插件可用於將自定義字體添加到您的 WordPress 網站。 通過使用這種方法，您將能夠通過使用各種字體來吸引人們對您網站的關注。 排版已被證明在研究中具有許多好處。 一個簡單的網站讓客戶更容易與您溝通。 通過使用 CSS 屬性，除了更改其樣式和位置外，您還可以更改首選字體的樣式和位置。 除了您自己的字體控件，您還可以使用 WordPress 插件設置頁面來添加它們。 如果您不想使用插件，可以使用此插件代替 Adob​​e 字體。

安裝 Custom Adob​​e Fonts 插件，可以輕鬆地將這些字體合併到您的 WordPress 網站中。 安裝插件，然後導航到 Adob​​e 龐大的字體庫以找到適合您的字體（您必須註冊才能使用它）。 選擇字體後，單擊它，然後在頁面右上角查找“添加到 Web 項目”。 使用 Font Pair，您可以查看字體組合的外觀，並且可以根據您看到的內容混合和匹配字體。 有幾個優秀的網站出售由設計師自己創建的自定義字體。 Squirrel 字體包含一個大型字體庫，而且實現起來也很簡單。 您可以使用@Font-Face 的網絡字體工具包。

您的 WordPress 網站現在應該可以使用了。 該工具包包括字體文件以及包含創建自己的 CSS 樣式表所需的代碼的樣式表。 例如，我們需要為 OpenSans-ExtraBold- web 字體使用以下 CSS。 最好的解決方案是將所有字體文件保存在您選擇的位置。

如何在 WordPress 中加載谷歌字體

導航到 WordPress 管理面板並選擇添加新的。 從 Google Play 商店下載並安裝 Easy Google Fonts。 安裝插件後，您必須單擊激活按鈕才能開始使用它。

在您的網站或數字產品上，您可以使用 Google 字體試驗 1000 多種不同的字體系列。 如果您想手動將 Google 字體添加到您的 WordPress 網站，有多種選擇。 它們是免費和開源的，因此任何開發人員都可以使用它們。 集成 Google 字體最方便的方法是在您的 functions.php 文件中包含一個帶有特定字體系列 URL 的片段。 如果您發現手動過程很困難，您可以使用插件。 您可以首先通過訪問 WordPress 插件存儲庫來安裝插件。 現在必須安裝並激活它。

大多數 WordPress 主題都將 Google 字體集成作為其默認設置的一部分。 組成 OMGF 平台的插件允許您瀏覽網站上的 600 多種字體。 在“字體系列”下拉菜單中，您可以為網站的各個部分從 100 多種不同類型中進行選擇。 如定制器預覽中所示，有多種添加自定義字體控件的選項。

我應該在 WordPress 本地加載 Google 字體嗎？

如果您的 WordPress 網站出現 Google 字體錯誤，您應該在本地加載 Google 字體以解決它們。 有一些您無法控制的外部資源和腳本，這使得壓縮、縮小或優化它們變得不可能。 如果您不採取這些預防措施，您的 WordPress 速度將受到嚴重阻礙。

Wp-內容/主題/你的主題/字體

wp-content/themes/your-theme/fonts 文件夾是您可以存儲要與主題一起使用的任何自定義字體的地方。 字體可以通過 FTP 或使用文件管理器插件添加到此文件夾。 將字體添加到此文件夾後，可以通過引用字體名稱在主題的 CSS 中使用它們。

如果使用以下主題之一，全局樣式可用於更改網站的字體。 在這種情況下，基本字體和標題字體在同一對字體中。 要保存新的字體對，請單擊全局樣式菜單中的發布按鈕，或單擊重置以恢復更改。 選擇適當的自定義字體後，您可以根據需要隨時更改它們。 如果要更改標題或基本字體的大小，可以通過選擇每種字體下方和右側的大小選項，然後從下拉菜單中選擇大小來實現。 使用自定義 CSS，您可以更改全局默認字體大小。 如果您在測試後決定停止使用插件，請確保停用或刪除插件。 無法將 Typekit.com 帳戶鏈接到 WordPress.com 博客或網站。 如果要測試特定字體與給定語言的兼容性，請使用定制器。

在沒有插件的情況下將字體添加到 WordPress

有幾種方法可以在沒有插件的情況下將字體添加到 WordPress。 一種方法是使用 Google 字體庫。 只需訪問 Google 字體網站，選擇您要使用的字體，然後復制提供的代碼。 接下來，打開您的 WordPress 儀表板並轉到外觀 > 自定義。 然後，單擊“其他 CSS”選項卡並粘貼您從 Google 字體複製的代碼。 保存您的更改，新字體將應用於您的網站。

主題不必在其默認設置中包含 Web 字體。 在瀏覽網頁時，您可以使用瀏覽器下載它。 要將字體代碼複製並粘貼到您的主題文件中，只需選擇您想要的字體。 您可以同時使用多種字體，您將看到字體加載的時間。 轉到 WordPress 博客儀表板，為您的 WordPress 博客添加更多 CSS。 將灰色框 1 中的整個代碼複製到正文文本的網絡字體中。 新的網絡字體系列可以在Google 字體庫的第二個灰色框中找到。 另外，下面的代碼可以用來調整字體大小和字體粗細。