如何在 WordPress 子主題中使用 Google 字體

已發表: 2022-11-07

如果您使用的是 WordPress 子主題並希望利用許多可用的 Google 字體，則需要遵循一些簡單的步驟。 在本文中，我們將向您展示如何在 WordPress 子主題中使用 Google 字體。 首先，您需要決定要使用哪種 Google 字體。 有很多可供選擇，因此請花一些時間瀏覽這些選項。 一旦你決定了，前往谷歌字體網站並點擊你想要使用的字體的“添加到收藏”按鈕。 接下來，轉到您的 WordPress 儀表板，然後單擊“外觀”選項卡。 然後，單擊“編輯器”鏈接。 這將帶您進入主題編輯器頁面。 在主題編輯器中，查找“樣式表”（style.css）文件。 這是您需要為您的 Google 字體添加代碼的地方。 向下滾動到樣式表的底部並查找“排版”部分。 在本節中，您將看到一個名為“google_fonts”的字段。 將您從 Google 字體網站複製的代碼粘貼到此字段中。 現在，保存您的更改，您就完成了！ 您的 WordPress 子主題現在應該使用您選擇的 Google 字體。

可以藉助子主題將 Google 字體添加到 WordPress 網站。 將 Google 字體添加到您的網站非常簡單，只需三個步驟。 使用嵌入選項卡，找到 @import 選項，抓住該行，並將其粘貼到您的子主題的 style.html 文件中。 你可以使用 font-family 屬性讓它出現在你的樣式中。 您將在標準字體選擇的嵌入選項卡中看到指向首選字體系列的鏈接。 這需要包含在主題的 header.php 文件中。 例如，在二十七年，圖片應該是這樣的： 鏈接的方法。 您可以在自己的風格中使用新字體。 由於新的 css 文件，文件結構沒有變化。

如何將 Google 字體添加到我的 WordPress 主題？

資料來源：brayve.net

轉到插件，使用 WordPress 管理面板添加新插件。 只需在搜索欄中輸入Easy Google Fonts並將其安裝在您的網站上。 要開始使用該插件，只需在安裝後單擊激活按鈕。

您添加到 WordPress 網站的字體可以通過兩種不同的方式完成。 您可以使用 Google 字體託管服務或安裝字體管理器插件來管理您網站的字體。 在本指南中，我們將向您展示如何使用插件設置自定義字體。 此外，我們將為您提供一些插件供您考慮使用。 您可以使用 Supreme Google WebFonts 插件從帖子頁面中選擇不同的字體。 除了插件之外，該插件還附帶 26 個字體系列。 Styleguide 是一個免費插件，可讓您更改網站字體的顏色。

它不僅將簡單字符轉換為印刷符號，而且還生成適當的字符以供顯示。 當您使用 WP Typography 時，您可以自定義 WordPress 的字體以適合您的風格。 要替換減號等字符，可以使用連字符（en 或 em dash）。 該插件可以更輕鬆地處理複雜的符號，例如引號、指數、版權符號和其他字符。 WordPress 字體管理器是一個 WordPress 應用程序，可讓您創建和管理您的 WordPress 主題。 使用 fontspress，您可以從各種網絡排版服務目錄中查找和下載字體，例如 Google 字體、Adobe Typekit、Cuffons 和 @Fontface。 松鼠的名字來源於希臘語中的松鼠。 Font Squirrel 工具可用於將CSS 字體與 WordPress 網站集成。 使用此插件，您可以通過更改顏色、輪廓、大小和粗細來輕鬆預覽任何類型的字體。

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

如果您的 WordPress 站點在 GTmetrix/Pingdom 中有Google 字體錯誤，您應該在本地加載 Google 字體以解決它們。 無法控制外部資源和腳本，使其無法壓縮、優化或縮小。 您的 WordPress 速度將受到嚴重影響。


如何在 WordPress 中加載谷歌字體

資料來源：coralnodes.com

在 WordPress 中添加 Google 字體
您需要做的第一件事是前往 Google 字體網站並瀏覽字體庫。
找到您喜歡的字體後，單擊“添加到收藏”按鈕。
接下來，單擊頁面頂部的“使用”按鈕。
在下一頁上，您需要選擇要使用的樣式以及字符集。
完成後，單擊“獲取代碼”按鈕。
在下一頁上，您將獲得一段代碼，您需要將其添加到您的 WordPress 網站。
最簡單的方法是安裝插入頁眉和頁腳插件。
安裝並激活插件後，轉到設置»插入頁眉和頁腳頁面並在頁眉部分添加代碼。
不要忘記單擊“保存更改”按鈕來存儲您的設置。
就是這樣！ 您已成功將 Google 字體添加到您的 WordPress 網站。

您可以使用 Google 的字體庫創建 1000 多種不同的字體系列和样式，您可以在您的網站或數字產品上使用這些字體庫。 為 WordPress 網站手動配置 Google 字體有多種選擇。 免費和開源項目旨在使它們易於訪問和可用於任何項目。 要集成 Google 字體，請使用 functions.php 文件中出現的代碼片段並鏈接到特定的字體系列。 如果您正在尋找一種更簡單的方法來完成任務，可以使用插件來代替手動過程。 第一步是從 WordPress 插件庫下載 WordPress 插件。 完成安裝和激活步驟後，您就可以使用它了。

谷歌字體已經集成在許多 WordPress 主題中。 該插件的用戶界面允許您訪問各種字體。 您可以在網站各個部分的“字體系列”選項的下拉菜單中從 100 多種不同的字體類型中進行選擇。 在定制器預覽中，您將看到可以添加到您自己的自定義字體中的字體列表。

WordPress 谷歌字體預連接

WordPress 的一大優點是它帶有大量可供選擇的插件和主題。 最受歡迎的插件之一是Google 字體插件，它允許您在您的網站上使用任何 Google 字體。 谷歌字體插件非常容易使用，而且是免費的！ 只需安裝插件，然後從設置頁面中選擇要使用的字體。 該插件的一大優點是它會自動預連接到 Google Fonts API，這意味著您的網站將加載得更快。 如果您正在尋找一種在 WordPress 網站上使用 Google 字體的簡單方法，那麼 Google 字體插件就是完美的解決方案。

使用 preconnect 方法連接到 https://Fonts.gstatic.com。 使用片段插件 dotsfired 是查看 1 到 9 條（共 9 條）的 9 條回复最方便的方式。 Autoptomize 和 YITH Zoom Magnifier 的一項或多項設置似乎存在衝突。 因此，當您將 Google 字體異步到 jQuery 時，會導致控制台錯誤“未定義 jQuery”。 沒有預連接，也無需擔心（非特定顯示屬性）。 我可以提供一個非常激進的代碼片段，通過在其中使用字符串 WebFontConfig 來指示 AO 刪除所有 JS，但我更喜歡使用主題或插件的配置。

添加 Google Web 字體

添加 Google Web 字體非常簡單，只需幾分鐘即可完成。 首先，您需要找到要在您的網站上使用的 Google Web 字體。 找到要使用的字體後，您需要將以下代碼添加到您網站的部分： 將“Roboto”替換為您要使用的Google Web 字體的名稱。 將代碼添加到您的網站後，您可以通過將以下 CSS 添加到您網站的樣式表來使用該字體： font-family: 'Roboto', sans-serif; 將“Roboto”替換為您正在使用的 Google Web 字體的名稱。 這裡的所有都是它的！

谷歌字體（內容交付網絡的首字母縮寫）是谷歌字體的在線庫。 它允許我們從各種字體系列中進行選擇。 有關 Google 字體的更多信息，請參閱以下部分。 如果您使用多種 Google 字體，則需要將鏈接複製到 HTML 文件的頭部，然後將其粘貼到多種 Google 字體區域。 在兩種不同的 Google 字體之間進行選擇：Comforter 和 Open Sans。 要設置 CSS 規則的樣式，請使用元素選擇器使它們按需要顯示。 在以下代碼段中，將有相應的輸出。 通過在系列和類別中搜索 Google 字體，您可以創建與您喜歡的樣式相對應的字體。

將 Google 字體添加到您的網站的 3 種方法

選擇 Google 字體並將它們添加到您的網站。 安裝 Google 字體是您網站上可用的幾個選項之一。 如果要更改字體樣式，請去谷歌查找字體； 然後，在字體類別和系列中，選擇您想要的樣式。 選擇字體後，您需要復製字體鏈接並將其粘貼到 HTML 文件的頭部。 如果您需要從其他網站導入 Google 字體，請按照以下步驟操作。 Google 字體導入允許您使用字體，而無需從您的網站複製字體鏈接。 通過打開 Google 字體並單擊字體（帶有它的卡片），您可以選擇所需的樣式。 在右側，您會找到一個標有 Selected family 的容器。 當提示嵌入時，選擇鏈接> 或導入[/鏈接]，具體取決於要添加字體（在 HTML 或 CSS 中）的位置。