如何在 2022 年向 Elementor 網站添加自定義字體

排版是網頁設計師以一種很好的方式放置字母和文本的主要關注點之一。 正確的排版高度負責使整個設計結構可讀、清晰，並且在視覺上吸引讀者。

“網站字體佔設計的 90%。”

元素

在您的 WordPress 網站上，您可以獲得超過 800 多種內置字體的默認集合。 但是，如果您有自己的品牌定製版式，或者您想給您的網站一些獨特的外觀，那麼困難就來了。 好吧，Elementor 自定義字體功能可以節省您的精力。 它允許您向 WordPress 網站添加不同的自定義字體樣式、大小和變體。

在今天的教程中，我們將展示如何使用 Elementor 自定義字體功能將字體添加到 WordPress 網站。

Elementor 自定義字體功能說明

定制（customizable）是指您可以根據您對任何特定部門的願望或要求創建或生產的特定事物。 自定義 Elementor 字體為您提供了一些易於自定義的字體格式。 與使用常規或默認字體相比，它可以讓您有效地創建、編輯或調整附加功能。

您會在 Elementor 網站上找到五種類型的自定義字體格式，它們是：

1. Web 開放字體格式 (WOFF) – WOFF 是最推薦使用的格式，因為它受到所有現代瀏覽器的支持
2. Web 開放字體格式 (WOFF 2.0) – TrueType 或 OpenType 字體提供比 WOFF 1.0 更好的壓縮
3. TrueType Fonts (TTF) – 該字體由 Apple 和 Microsoft 在 1980 年代後期開發
4. SVG 字體/形狀– SVG 字體允許 SVG 在顯示文本時用作字形。 確保使用此格式來支持舊版本的 iPhone
5. Embedded OpenType Fonts (EOT) – 此字體文件適用於 IE，但不適用於其他瀏覽器。 確保使用此格式來支持早期版本的 IE

注意：歐盟正在向 GDPR 添加新規則。 任何在其網站上使用直接託管的 Google 字體的人都將違反 GDPR 規則。 谷歌將對該網站處以 100 歐元的罰款。 因此，如果您有 Google 字體，它必須在本地託管，或者您可以使用自己的自定義字體。

但是，您也可以使用 Perfmatters 插件管理您網站的 Google 字體。 查看有關如何在 WordPress 中本地託管 Google 字體的文檔。

讓我們在下面查看以了解如何將字體添加到 Elementor 網站：

如何在 WordPress 中向 Elementor 支持的網站添加字體

您可以通過兩種簡單的方式添加自定義字體 -

1. 方法 1：將字體添加到 Elementor 包括代碼
2. 方法二：使用 Elementor 的自定義字體功能

如果您是 Elementor 的新手，請查看這篇關於如何正確使用 Elementor 的便捷博客。

方法一：使用代碼將字體添加到 Elementor

讓我們看看如何按照手動過程將字體添加到 Elementor 網站。

• 通過FTP 客戶端或使用cPanel將新的“字體”文件夾添加到主題文件夾。 新文件夾應位於wp-content/themes/fonts
• 一次，您添加了新的“字體”文件夾，將所有字體文件添加到其中
• 現在，打開主題的樣式表 (style.css) 並向其中添加以下代碼：

 @font-face { font-family: 'nameofnewfont'; src: url("/fonts/nameofnewfont.woff2") format("woff2"), url("/fonts/nameofnewfont.woff") format("woff"); font-weight: normal; font-style: normal; }

• 通過將元素添加到相同的樣式表來配置將使用此字體的元素。
• 這種方法對初學者來說可能會很痛苦。 每當您想添加“斜體”或“粗體”等配置時，您都必須經過相同的過程並添加這些參數。 涉及到很多編碼。

對於那些不想處理此技術流程的人，您可以按照以下流程成功將自定義字體添加到您的 Elementor 網站。

方法二：使用 Elementor 的自定義字體功能

自定義字體是 Elementor 的一項專業功能。 因此，請確保您已在您的網站上安裝並激活了 Elementor（免費）和 Elementor Pro 插件。

步驟 01：為您的網站添加自定義字體

首先，導航到Elementor>Custom Fonts

在這裡您可以創建自定義字體。 例如，單擊Add new以創建自定義字體結構。

給你的字體一個標題。 然後點擊Add Font Variation 。

步驟 02：添加字體變體並上傳字體文件

在這裡，您可以為字體添加一些附加選項。 例如字體粗細、樣式和字體文件。

讓我們上傳一個 TTF 自定義字體文件。 為此，請單擊上傳按鈕。

從您的設備或所在文件夾上傳字體文件。

注意：在將它們上傳到此處之前，請確保將您的首選字體文件保存在您的設備上！

完成後，您可以從此處查看字體詳細信息。

按照相同的過程，繼續每種格式的字體文件上傳過程。 讓我們上傳另一個字體變體。 例如，單擊“添加字體變化”按鈕並設置字體粗細和样式。

將字體粗細設置為 100，然後再次單擊上傳按鈕。

上傳文件後，您可以從媒體庫中添加它。

步驟 03：發布最終的自定義字體

執行相同的過程，為您的站點添加不同的字體變體。 完成後，只需點擊發布按鈕。

步驟 04：在 Elementor 設計中使用自定義字體

現在您可能正在考慮如何使用此自定義字體。 正確的？ 讓我們看看如何查找和使用這種自定義字體，您需要在 Elementor 設計面板上打開任何 Elementor 頁面。 然後在面板上添加任何文本小部件。

將Heding Widget添加到 Elementor 編輯面板。

添加文本小部件（標題）後，

• 導航到樣式部分
• 點擊排版
• 在這裡您可以找到您之前創建的字體（我的字體）。 只需選擇字體

添加字體後，現在是您體驗其他排版選項的時候了，以使您的文本或字體看起來更好、更吸引人。 例如字體大小、粗細、變換、樣式、裝飾、線寬等等！

嗯，一個非凡的設計比一個簡單的設計更能吸引客戶的注意力。 因此，如果您想讓您的網頁標題更加智能和令人愉悅，那麼下一部分就適合您。 在這裡，我們將展示如何使用 Happy Addons Animated Text 小部件對標題進行樣式化。

讓我們學習如何設計自定義 Elementor 標頭

使用快樂插件文本動畫小部件為您的字體設計風格

動畫文本小部件是快樂插件的專業功能。 通過使用這個很酷的小部件，您可以使您的文本變得如此有趣和吸引人。 它有 10 個預先構建的設計佈局，以減少您的額外工作和困難。 因此，一旦將其添加到 Elementor 設計面板，您只需選擇正確的設計佈局並根據您的網頁結構對其進行自定義。

讓我們實際看看如何在 WordPress 網站上使用動畫文本小部件，而不是使用普通的文本或字體。

要開始使用，您需要安裝並激活這些插件：

1. 無元素
2. 快樂插件免費和專業版

第 1 步：添加動畫文本小部件

首先，從小部件庫中拖放小部件。

您將在屏幕上獲得小部件的初始視圖。

使用您之前創建的自定義字體文本。 要選擇它，請點擊樣式按鈕、排版並選擇我的字體。

第 2 步：將設計添加到您的文本中

現在再次點擊內容部分。 並選擇您最喜歡的設計。

一旦你確認了設計，現在是時候調整動畫風格了。 為此，請單擊Content並在其中找到Animation type 。 逐一探索每種類型，為您的網站帶來更好的輸出。

注意：動畫延遲以毫秒為單位。 最小 1000 和最大 30000。

第 3 步：在網頁上查看動畫文本的最終輸出

在您自定義字體上的動畫文本小部件後，讓我們看看最終輸出。

這就是 Happy Addons 的 Animated Text 小部件如何幫助您緩和無聊的字體或文本。 但是，如果你想詳細了解這個小部件，你可以查看這個小部件的官方文檔。

或者，為了更好的可視化，您可以查看下面的動畫文本視頻教程。

關於 Elementor 自定義字體的一些一般查詢

準備好探索 Elementor 自定義字體功能了嗎？

自定義字體具有多種功能。 從建立獨特的品牌風格到獲得更多客戶，自定義字體始終支持營銷人員、設計師或網站所有者。 除了使用常規的 Google 字體外，自定義字體還可以幫助您的在線業務以其獨特的風格和外觀吸引更多客戶。

因此，我們希望這篇 Elementor 教程文章能夠豐富您的知識，以便在您的 WordPress 網站上巧妙地使用自定義字體。 此外，Happy Addons 的動畫文本小部件將幫助您將文本修改到一個新的水平，並為整體網站設計增加額外的價值。

如果您喜歡本教程，您可以訂閱我們的時事通訊以閱讀更多有趣的文章，例如 WordPress 教程、Elementor 教程、提示和技巧以及最新更新！