如何更改字体店面 WooCommerce 主题

已发表: 2020-09-25

WooCommerce 店面更改字体 Storefront 主题是大多数 WooCommerce 商店中使用的最受欢迎的主题之一。就像 WooCommerce 一样，Storefront 主题很灵活，您可以进行自定义以满足您品牌的需求。Storefront 默认使用 Helvetica Neue 字体。这种字体非常简单，简单总是好的。但是，简单性可能并不总是适合您的目标设计，您可能希望使用不同的字体。

WooCommerce 店面更改字体快速指南

话虽如此，您如何更改主题的字体？在本教程中，我将教您如何使用 Google 字体更改店面主题的字体。

字体类型。

有四种基本类型的字体，既富有表现力又时尚。其中一些只适用于很多情况，但您可能想用某种字体来表达自己。这意味着您必须寻找适合您需求的字体类型。最重要的是找到合适的平衡点。

以下是您可以使用的字体类型：

衬线

这种字体的特点是在笔画末端附有细线，称为衬线。衬线字体被认为是传统字体类型，它们在印刷中更容易阅读，因此它们更适合在印刷中使用。

无衬线字体

无衬线字体既现代又简约。它没有任何衬线，建议用于网络发布。

脚本

这些字体模仿草书的笔迹。它们也被称为草书字体类型并具有连接字母。它经常被描绘成女性化和优雅的。

装饰性的

许多字体属于装饰类型。它们包括万圣节字体、圣诞节字体和标志性的星球大战字体。它们只能用于装饰，绝不能用于主副本。这是因为它们很新颖，应该用于特定目的。

衬线与无衬线？

当你选择字体时，你应该只选择那些读者不会注意到字体而是信息的字体。在阅读内容时，装饰性和脚本等字体可能会分散注意力，这意味着衬线和无衬线字体通常用于正文或副本。但是，Serif 和 Sans-serif 字体之间有什么区别？

Serif 字体的主要目的是引导单词的水平“流动”。小装饰有助于增加间距的对比度，并帮助眼睛和大脑将每个单词块区分开来，使其更易于阅读。

但是，由于我们的显示器中的每英寸点数 (DPI) 有限，因此为网络制作的文本并非如此。这意味着衬线类型的粗细线条在小文本中可能无法识别。这就是为什么您需要一种像无衬线一样简约、现代和简单的简化字体。

衬线字体主要用于书籍、报纸、杂志和其他印刷媒体，因为它们有利于阅读。此外，由于 DPI 限制，在线出版更倾向于使用无衬线字体。

话虽如此，您的 WooCommerce 商店应该使用哪种字体？您最好的选择是无衬线字体，在大多数情况下都是如此。但是，如果您认为衬线字体可以达到您的目的，您应该使用它。

谷歌字体

这是一项免费服务，由 Google 提供，可让网站更轻松地使用自定义字体。您可以从 Google Fonts 目录中选择特定字体，您只需复制一段代码，Google 就会为您的网站托管该字体。谷歌字体是目前最好的解决方案之一。

谷歌字体的优势

易于安装和设置。
这些字体以开源形式发布，可免费用于任何商业或非商业项目。
它具有一些分析功能，可以按网络上的使用情况显示最流行的字体。

谷歌字体的缺点

该字体托管在您的站点之外，这意味着它可能会增加一点页面加载时间。
这些字体是开源的，除了流行的字体外，它们可能存在一些质量问题。如果字体执行不当，可能会出现诸如缺少字形、可扩展性差和字体未在 iOS 上显示等问题，具体取决于字体。

Google Fonts 的好处是您可以将字体预览为单词、句子、段落或海报，以帮助您确定要使用的字体类型。无衬线字体

在店面主题中添加 Google 字体的步骤

通过复制粘贴在您的网站上添加 Google 字体非常简单。以下是您应该遵循的步骤：

您需要选择要嵌入的字体并选择标准代码并复制。
之后，在您的子主题的functions.php 中添加一个钩子函数。使用子主题很重要，因为您所做的更改将在更新 Storefront 时丢失。

 add_action('storefront_header', 'jk_storefront_header_content', 40);

            功能 jk_storefront_header_content() { ?>

                        // 将此行替换为此处复制的 google 字体代码

                        <?php

            }

*请注意您需要在步骤 1 中插入代码的部分。

之后，您的 WooCommerce 网站现在可以使用您选择的字体了。

如何在内容上应用字体

最后一步是将字体添加到您的 CSS 中，以便字体在您的网站上生效。您需要添加以下代码，将 Storefront 中的默认字体替换为“Open Sans”。您需要做的就是将字体名称替换为您在上一节中添加的字体，然后将代码粘贴到您的子主题的styles.css 中。

 h1，h2，h3，h4，h5，h6，正文，按钮，输入，textarea {

font-family: 'Open Sans', sans-serif;

}

但是，如果您想为标题使用不同的字体集，请改用下面的代码。请记住将字体名称替换为您添加的字体。

 正文，按钮，输入，文本区域 {

font-family: 'Open Sans', sans-serif;

}

h1，h2，h3，h4，h5，h6 {

font-family: 'Slabo 27px', serif;

}

这是一个插图：

CSS

但是，您应该注意，如果您使用的子主题使用更具体的选择器，则上述代码可能不起作用。

这是结果：

结论

这就是您更改 Storefront 主题字体的方式。在本教程中，我重点介绍了可用于商店的四种字体。它们是 Serif、Sans-serif、Scripts 和 Decorative。此外，衬线字体有利于阅读，这就是它主要用于书籍、报纸杂志和其他印刷媒体的原因。此外，我们已经看到，由于 DPI 限制，在线出版更倾向于使用无衬线字体。

我还向您展示了如何从 Google Fonts 中选择字体，这些字体以开源形式发布，可免费用于任何商业或非商业项目。但是，您可以选择要用于您的网站的字体类型。您应该选择一种易于阅读的字体。选择后，按照简单的步骤将 Google 字体添加到 Storefront 主题。

类似文章

如何使用 4 个简单选项删除使用 Storefront 和 Woocommerce 页脚链接构建
定制店面 WooCommerce 主题的 80 多种技巧：终极店面主题定制指南
如何使用插件删除店面页脚文本和链接
什么是 WooCommerce 店面主题？ [已回答]
如何创建 WooCommerce 店面子主题 [完整指南]
WooCommerce 店面主题主页定制 [终极指南]
如何调整页眉的 WooCommerce 店面高度