如何使用Typekit在WordPress中添加很棒的字體


您是否想過設計師如何在他們的網站上使用漂亮的自定義Web字體? 他們經常使用Typekit(一種Adobe服務,可讓您訪問高質量字體)向WordPress添加自定義字體。 在本文中,我們將向您展示如何在WordPress中添加Typekit字體以改善排版。

WordPress中的Typekit字體

為什麼使用Typekit字體?

Typekit是一種流行的基於訂閱的字體服務,可以為您節省很多錢。 您無需支付昂貴的單個字體許可證的費用,而可以免費或以固定的年費訪問其數百種字體的整個庫。

Typekit庫包含1000多種字體。 可通過Adobe服務Typekit獲得一些可以在網上找到的最漂亮的字體。

他們的基本免費計劃可以訪問230多種字體,您可以在一個網站上免費使用2個字體系列。 其他計劃的費用從每年49.99美元到99.99美元不等。

這些令人敬畏的Typekit字體可以輕鬆添加到任何網站,而不會降低頁面加載速度。 字體是從Adobe的CDN提供的,並且加載速度比將字體託管在自己的站點上時要快得多。

用於WordPress視頻教程的Typekit

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,則可以繼續閱讀以下內容。

為什麼要在WordPress上使用自定義Web字體?

排版在您的網站設計中起著至關重要的作用。

選擇正確的字體將清楚地將您的個性和信息傳達給讀者。 無論您要描繪哪種圖像(專業,友好,休閒,經驗豐富),您網站上的字體都可以幫助投影正確的圖像。

通過使用正確的字體集,您可以留下持久的印象。 您的文本看起來與網絡上的其他站點不同,而與眾不同。 為您的WordPress網站選擇合適的字體可以使您的網站從簡單的設計變為美觀和令人驚嘆的藝術品。

正確的自定義Web字體可以:

  • 提高轉化率
  • 降低網站的跳出率
  • 增加您在網站上花費的時間
  • 為用戶創造難忘的體驗

準備開始使用Typekit字體了嗎? 這是使用Typekit自定義WordPress設計的方法。

如何開始使用Typekit

首先,您需要創建一個Typekit帳戶。 為此,只需訪問Typekit.com比較可用計劃。

您需要選擇要註冊的計劃。 免費計劃將您限制在一個網站上,並且可以訪問有限的字體。 您可能想開始使用免費計劃進行試用,然後再升級。 升級將為您提供更大的字體庫,並且您可以在更多網站上使用它們。

Typekit訂閱計劃

下一步是創建一個工具包。 該工具包使您可以為網站組合一個特定的字體和設置庫,因此Typekit僅加載所需的文件和代碼。 要創建您的工具包,請添加您的站點名稱和域名,然後單擊 繼續

為您的網站創建工具包

在為工具包填寫完信息後,Typekit將為您提供一些JavaScript代碼以添加到您的網站中。 您可以將此代碼複製並粘貼到文本編輯器(如“記事本”)中以立即保存。 我們將在本教程的下一步中將其添加到您的站點。

現在,您可以開始選擇字體。 您可以瀏覽字體庫並按分類,粗細,寬度,x高度等選項進行過濾。

從Typekit庫中選擇一種字體

當您看到喜歡的字體時,可以單擊它以獲得更多詳細信息和示例。 如果要將其添加到您的網絡工具包中,請單擊 網絡使用:添加到套件 右側的按鈕。

向您的Web工具箱中添加Typekit字體

這將彈出一個彈出窗口,您需要在其中將所選字體添加到剛創建的工具包中。

將您的自定義Web字體添加到工具包

現在您可以點擊 發布 按鈕將更改保存到套件中。

發布您的工具包以保存您的更改

就這樣! 您的字體工具包現在可以使用了。

在WordPress中添加Typekit字體

將新的自定義Web字體添加到WordPress博客的最簡單方法是使用WordPress Typekit插件。

我們建議使用WordPress插件的Typekit字體。 安裝並激活插件後,您可以訪問 設置»Typekit字體 配置插件。

使用wordpress typekit插件自定義字體

首先,您需要將先前保存的JavaScript代碼粘貼到Typekit嵌入代碼字段中。 之後,您可以添加CSS選擇器以指定要在網站上使用字體的位置。

在上面的屏幕截圖中,我們將字體添加到了 h1.site-title CSS選擇器。

您的WordPress主題可能對不同的元素使用不同的類。 您需要在Web瀏覽器中使用Inspect Element工具來查找那些CSS類。 您可能還想查看我們的WordPress生成的CSS備忘單,以供初學者使用,以幫助您入門。

使用Google Chrome瀏覽器中的Inspect Element工具查找CSS類

就這樣! 我們希望本文能幫助您學習如何使用Typekit在WordPress中添加出色的排版。 您可能還想看看我們的指南,了解如何在WordPress主題中添加Google網絡字體。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。