如何像专业人士一样将自定义字体添加到 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。

您可以通过一些代码在不同的地方使用它们，并调整从大小到字母间距的所有内容。

样式编辑器使您可以轻松自定义您的网站，而不是内置字体选项。

那么如何使用自定义字体让您的网站看起来更智能呢？