如何像專業人士一樣將自定義字體添加到 Squarespace

想要將自定義字體添加到 Squarespace？

如果您是 Squarespace 用戶，您已經知道該平台帶有一些可靠的字體選項。 但是有很多理由將字體添加到 Squarespace 網站！

通常，它是一種品牌字體，甚至是您製作的定製字體。

也許它更多的是關於您想要為網站中的元素創建的特定外觀。

不管是什麼原因，將自定義字體添加到 Squarespace 很容易——只需按照這個過程！

如何將自定義字體添加到您的 Squarespace 網站

將您選擇的字體添加到 Squarespace 網站非常簡單，但需要添加一些 CSS。

在開始之前確保你可以這樣做，或者找一個合適的人。

第 1 步。選擇您的字體

如果您已經選擇了要使用的字體，請跳到下一步。 否則，請確保您選擇了可以在博客上合法使用的字體。

有很多地方可以找到免費和付費字體，例如 Creative Market。 但在向您的網站添加許可之前，請檢查許可。

步驟 2. 準備您的網絡字體文件

要將字體添加到網站，您需要三種字體文件格式：

1. .ttf 或 .otf
2. .woff
3. .woff2

有時您可能有網絡字體文件類型，如果有，請跳過此步驟。 你可以使用它。

否則，請準備好添加這三種文件類型。

第 3 步。將您的字體文件上傳到 Squarespace

轉到設計 > 自定義 CSS > 管理自定義文件

在這裡，您將通過上傳按鈕添加字體。

對所有三個文件重複此操作，或者對 Web 字體文件（如果您有的話）重複此操作。

第 4 步。在 Squarespace 中命名您的自定義字體

上傳字體後，您需要使用 CSS 編輯器告訴 Squarespace 它在哪里以及它是什麼。

使用以下代碼：

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

拿這個並為您的字體添加相關信息：

• 字體名稱：將其替換為基於文件名或您會記住的字體名稱。
• 字體 URL：將其替換為您剛剛上傳的字體的 URL。 從您的上傳區域獲取 URL（以與圖像 URL 相同的方式）並將其添加到位。

第 5 步。定義自定義字體的使用位置和方式

最後，您只需要告訴 Squarespace 在您的網站上使用不同字體的位置。

這可以在您的標題或站點標題、按鈕，甚至是新聞通訊塊之類的地方。

如何在常見的地方使用你的字體

上傳字體後，您就可以開始向 Squarespace 提供有關在何處使用它的特定信息。

這裡有一些流行的例子以及如何做到這一點。

如何更改站點標題字體

站點標題是導航欄頂部的區域。

您可能在這裡有很多鏈接、一個文字徽標，也許還有一個公告。

所有這些的字體都可以使用以下 CSS 片段進行更改：

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

請記住將 YOURNAME 替換為您的字體名稱。

如何更改按鈕字體

另一個使用自定義字體的流行地方是您網站的按鈕。

共有三個按鈕塊：小、中和大。 您可以使用以下代碼更改其中一個或全部：

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

請記住將 YOURNAME 替換為您的字體名稱。

將其固定到 Pinterest，以便您稍後再回來！

（圖文後有更多自定義字體提示和疑難解答）。

如何更改通訊塊字體

時事通訊塊允許人們註冊您的電子郵件列表。 許多人為此使用不同的插件。

但是，如果您在 Squarespace 中使用該塊，則以下代碼將允許您添加自定義字體。

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

請記住將 YOURNAME 替換為您的字體名稱。

如何更改博客文章字體

與字體有關的最流行的事情之一是將其用於博客文章。

執行此操作時，您需要考慮文章頁面上的頁面標題、描述和帖子標題。

您可能希望它們都相同。

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

請記住將 YOURNAME 替換為您的字體名稱。

如何更改引用塊字體

最後一個示例是將引用塊更改為不同的字體。

這用於帖子中的報價，也用於客戶推薦或評論等內容。

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

請記住將 YOURNAME 替換為您的字體名稱。

您可能還喜歡我的 Squarespace 圖像尺寸指南。

自定義字體問題

一旦你掌握了一點 CSS，添加字體就很容易了。 但是報告了一些常見錯誤。

網站樣式中的“不支持的字體”消息

有時，您可能會在您的網站上看到“不支持的字體”消息。 當使用 Adob​​e 字體然後 Adob​​e 將其停用時，就會發生這種情況。

大多數時候，Squarespace 會將其替換為最接近的替代方案。 但如果沒有，您可能需要上傳另一種字體來替換它。

登錄後我的字體看起來不同

有時人們在登錄和查看實時站點時會注意到他們的字體看起來不同。 通常，這是因為字體閱讀器以及他們查看網站的方式。

如果您注意到這一點，請聯繫 Squarespace 支持，他們可以查看設置以查看需要調整的內容。

我無法將字體設置為特定大小

為字體設置特定大小的問題通常與您網站的後端有關。 這可能是由於您使用的 Squarespace 版本。

因此，請尋求支持以獲取他們對可能出現的問題的幫助。

將您的自定義字體添加到 Squarespace

只需一點 CSS，您就可以快速將自定義字體文件添加到 Squarespace。

您可以通過一些代碼在不同的地方使用它們，並調整從大小到字母間距的所有內容。

樣式編輯器使您可以輕鬆自定義您的網站，而不是內置字體選項。

那麼如何使用自定義字體讓您的網站看起來更智能呢？