更改 WordPress 網站字體的 3 種方法

已發表: 2022-11-05

如果您想更改 WordPress 網站上的字體,有幾種方法可以做到。 一種是安裝一個像Easy Google Fonts這樣的插件,它會給你一個設置頁面,你可以在其中選擇你想使用的字體以及你想在哪裡使用它們。 另一種方法是編輯主題的 CSS 文件以更改字體。 這是一種更高級的方法,您需要了解一些 CSS 才能做到這一點。 如果您使用的是 Genesis 框架,則有一個用於更改字體的內置工具。 要使用它,請轉到 Genesis > Theme Settings 並向下滾動到 Fonts 部分。 從那裡,您可以選擇要用於標題和正文的字體。

為您的 Confetti Genesis 兒童主題創建自定義字體! 根據需要下載字體並將其提取到您的計算機。 對於商業用途,DaFont 和 FontSquirrel 是免費字體的絕佳資源。 如果您更喜歡高級/獨特的字體,Creative Market 是一個不錯的起點。 檔案必須由您上傳。 您可以使用 FileZilla 或 Hosting File Manager 等 FTP 客戶端來執行此操作。 要自定義 CSS,請轉到外觀。 使用每個文件作為源 URL,添加從您上傳的文件創建的新 URL。 更改字體名稱和 URL 將確保您的服務器的字體文件保持正確的格式。

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

圖片來源:https://wpbeginner.com

有幾種不同的方法可以將自定義字體添加到 WordPress 主題中。 一種方法是使用Google 字體庫。 您可以瀏覽庫並選擇要在您的站點上使用的字體。 然後,您可以將這些字體的代碼添加到主題的樣式表中。 將自定義字體添加到 WordPress 主題的另一種方法是使用 Easy Google Fonts 之類的插件。 此插件允許您選擇要使用的字體,然後自動將代碼添加到您的主題中。 最後,您還可以通過將字體文件上傳到服務器,然後將代碼添加到主題的樣式表來將自定義字體添加到 WordPress 主題。

使用 Easy Google 字體插件,您可以為您的 WordPress 網站創建自定義字體。 由於這種安排,您將有機會在您的網站上顯示各種字體的驚人組合。 使用適當的排版已被證明具有許多優點。 如果您的網站易於閱讀和使用,客戶將能夠更有效地與您溝通。 此外,CSS 屬性可用於調整您選擇的字體的樣式和位置。 此外,如果您有 WordPress 插件,您可以通過單擊插件設置頁面添加自己的字體控件。 如果您不想使用插件,可以使用它作為 Adob​​e 字體的替代品。

Custom Adob​​e Fonts 插件允許您輕鬆地將這些字體合併到您的 WordPress 網站中。 安裝插件後,前往 Adob​​e 豐富的字體庫查找合適的字體(您必須註冊才能使用它)。 選擇您喜歡的字體後,您可以通過單擊頁面右上角的添加到 Web 按鈕將其添加到 Web 項目中。 字體對工具是一起預覽字體的絕佳方式,以便您可以根據需要混合和匹配它們。 幾個優秀的網站出售設計師設計的自定義字體。 例如,字體 Squirrel 是開發人員的絕佳選擇,因為它擁有龐大的字體庫且易於實現。 @Font-Face 有一個網絡字體工具包供您使用。

您可以從您的 WordPress 網站獲取該軟件。 每個工具包都包含一個字體文件和一個樣式表,其中包含構建自己的 CSS 樣式表所需的代碼。 我們必須使用以下 CSS 作為 OpenSans-ExtraBold-web 字體的示例。 最好將所有字體文件保存在您選擇的目錄中。

如何更改 Genesis 框架中的字體?

圖片來源:https://realtydigitalmarketing.com

如果您想更改 Genesis Framework 中的字體,可以通過轉到 WordPress 儀表板中的樣式設置頁面來實現。 在此頁面上,您會找到一個標有“基本字體系列”的下拉菜單。 從此菜單中,您可以選擇要用於站點的字體。

Genesis 主題帶有默認的 Source Sans Pro Google 字體。 您必須首先編輯您網站的字體配置和 style.html 文件。 更改字體時,請務必通過單擊頁面底部的更新文件按鈕來保存它。 使用本教程將 Google 字體添加到 Genesis 主題。 您可以通過搜索來更改 Google 字體設置的粗細(“Fonts-url”)。 以下示例將展示如何將權重 500 添加到 https://fonts.googleapis.com/CSS?family=Montserrat:400,400i,500,600,700&display=swap。

如何在 Genesis 中增加字體大小?

此示例中的字體大小為。 屏幕上的字體大小可以設置為任意數字。 向下滾動到主題/主題設置屏幕,然後點擊 [字體大小]。

如何更改主題中的字體?

從 Excel 的“頁面佈局”選項卡或 Word 的“設計”選項卡中選擇所需的字體。 當前主題在左上角有幾種字體。 當您選擇自定義字體選項時,您可以創建一組自定義字體。 轉到創建新主題字體框,然後從標題和正文字體框中選擇所需的字體。

使用字體的含義:繼承

如果您在網頁上使用 font:inherit,它將使用與父元素相同的字體,即使未聲明該字體。 從長遠來看,繼承可以幫助您節省時間,同時也可以節省資金,但請記住其潛在後果。
當父元素的字體與其子元素的字體不同時,font:inherit 不能用於修改它。 如果您使用繼承來覆蓋以前在樣式表中定義的樣式,則結果可能無法預測。
您必須明確聲明在覆蓋子元素時是否要使用子元素上使用的字體。 例如,您可以使用 font-family Arial,或 font-size: x-large; 在子元素上。
如果您的樣式表中有 font:inherit,請務必在您的瀏覽器中對其進行測試,看看它將如何影響您的頁面。 如果您打算更改頁面上的字體,請盡快更新樣式表。
fonts:inherit 的使用對於任何網站的設計和外觀都至關重要,理解其含義也至關重要。 當您使用此聲明時,所有後代元素將使用與其父元素相同的字體。 它可以為您節省大量造型時間,但必須了解它也可能產生嚴重後果。 如果 font:inherit 聲明沒有指定子元素的字體,它不會影響父元素。 要覆蓋子元素上使用的字體,請顯式聲明它。