如何在 WordPress 子主题中使用 Google 字体

已发表: 2022-11-07

如果您使用的是 WordPress 子主题并希望利用许多可用的 Google 字体，则需要遵循一些简单的步骤。 在本文中，我们将向您展示如何在 WordPress 子主题中使用 Google 字体。 首先，您需要决定要使用哪种 Google 字体。 有很多可供选择，因此请花一些时间浏览这些选项。 一旦你决定了，前往谷歌字体网站并点击你想要使用的字体的“添加到收藏”按钮。 接下来，转到您的 WordPress 仪表板，然后单击“外观”选项卡。 然后，单击“编辑器”链接。 这将带您进入主题编辑器页面。 在主题编辑器中，查找“样式表”（style.css）文件。 这是您需要为您的 Google 字体添加代码的地方。 向下滚动到样式表的底部并查找“排版”部分。 在本节中，您将看到一个名为“google_fonts”的字段。 将您从 Google 字体网站复制的代码粘贴到此字段中。 现在，保存您的更改，您就完成了！ 您的 WordPress 子主题现在应该使用您选择的 Google 字体。

可以借助子主题将 Google 字体添加到 WordPress 网站。 将 Google 字体添加到您的网站非常简单，只需三个步骤。 使用嵌入选项卡，找到 @import 选项，抓住该行，并将其粘贴到您的子主题的 style.html 文件中。 你可以使用 font-family 属性让它出现在你的样式中。 您将在标准字体选择的嵌入选项卡中看到指向首选字体系列的链接。 这需要包含在主题的 header.php 文件中。 例如，在二十七年，图片应该是这样的： 链接的方法。 您可以在自己的风格中使用新字体。 由于新的 css 文件，文件结构没有变化。

如何将 Google 字体添加到我的 WordPress 主题？

资料来源：brayve.net

转到插件，使用 WordPress 管理面板添加新插件。 只需在搜索栏中输入Easy Google Fonts并将其安装在您的网站上。 要开始使用该插件，只需在安装后单击激活按钮。

您添加到 WordPress 网站的字体可以通过两种不同的方式完成。 您可以使用 Google 字体托管服务或安装字体管理器插件来管理您网站的字体。 在本指南中，我们将向您展示如何使用插件设置自定义字体。 此外，我们将为您提供一些插件供您考虑使用。 您可以使用 Supreme Google WebFonts 插件从帖子页面中选择不同的字体。 除了插件之外，该插件还附带 26 个字体系列。 Styleguide 是一个免费插件，可让您更改网站字体的颜色。

它不仅将简单字符转换为印刷符号，而且还生成适当的字符以供显示。 当您使用 WP Typography 时，您可以自定义 WordPress 的字体以适合您的风格。 要替换减号等字符，可以使用连字符（en 或 em dash）。 该插件可以更轻松地处理复杂的符号，例如引号、指数、版权符号和其他字符。 WordPress 字体管理器是一个 WordPress 应用程序，可让您创建和管理您的 WordPress 主题。 使用 fontspress，您可以从各种网络排版服务目录中查找和下载字体，例如 Google 字体、Adobe Typekit、Cuffons 和 @Fontface。 松鼠的名字来源于希腊语中的松鼠。 Font Squirrel 工具可用于将CSS 字体与 WordPress 网站集成。 使用此插件，您可以通过更改颜色、轮廓、大小和粗细来轻松预览任何类型的字体。

我应该在 WordPress 本地加载 Google 字体吗？

如果您的 WordPress 站点在 GTmetrix/Pingdom 中有Google 字体错误，您应该在本地加载 Google 字体以解决它们。 无法控制外部资源和脚本，使其无法压缩、优化或缩小。 您的 WordPress 速度将受到严重影响。


如何在 WordPress 中加载谷歌字体

资料来源：coralnodes.com

在 WordPress 中添加 Google 字体
您需要做的第一件事是前往 Google 字体网站并浏览字体库。
找到您喜欢的字体后，单击“添加到收藏”按钮。
接下来，单击页面顶部的“使用”按钮。
在下一页上，您需要选择要使用的样式以及字符集。
完成后，单击“获取代码”按钮。
在下一页上，您将获得一段代码，您需要将其添加到您的 WordPress 网站。
最简单的方法是安装插入页眉和页脚插件。
安装并激活插件后，转到设置»插入页眉和页脚页面并在页眉部分添加代码。
不要忘记单击“保存更改”按钮来存储您的设置。
就是这样！ 您已成功将 Google 字体添加到您的 WordPress 网站。

您可以使用 Google 的字体库创建 1000 多种不同的字体系列和样式，您可以在您的网站或数字产品上使用这些字体库。 为 WordPress 网站手动配置 Google 字体有多种选择。 免费和开源项目旨在使它们易于访问和可用于任何项目。 要集成 Google 字体，请使用 functions.php 文件中出现的代码片段并链接到特定的字体系列。 如果您正在寻找一种更简单的方法来完成任务，可以使用插件来代替手动过程。 第一步是从 WordPress 插件库下载 WordPress 插件。 完成安装和激活步骤后，您就可以使用它了。

谷歌字体已经集成在许多 WordPress 主题中。 该插件的用户界面允许您访问各种字体。 您可以在网站各个部分的“字体系列”选项的下拉菜单中从 100 多种不同的字体类型中进行选择。 在定制器预览中，您将看到可以添加到您自己的自定义字体中的字体列表。

WordPress 谷歌字体预连接

WordPress 的一大优点是它带有大量可供选择的插件和主题。 最受欢迎的插件之一是Google 字体插件，它允许您在您的网站上使用任何 Google 字体。 谷歌字体插件非常容易使用，而且是免费的！ 只需安装插件，然后从设置页面中选择要使用的字体。 该插件的一大优点是它会自动预连接到 Google Fonts API，这意味着您的网站将加载得更快。 如果您正在寻找一种在 WordPress 网站上使用 Google 字体的简单方法，那么 Google 字体插件就是完美的解决方案。

使用 preconnect 方法连接到 https://Fonts.gstatic.com。 使用片段插件 dotsfired 是查看 1 到 9 条（共 9 条）的 9 条回复最方便的方式。 Autoptomize 和 YITH Zoom Magnifier 的一项或多项设置似乎存在冲突。 因此，当您将 Google 字体异步到 jQuery 时，会导致控制台错误“未定义 jQuery”。 没有预连接，也无需担心（非特定显示属性）。 我可以提供一个非常激进的代码片段，通过在其中使用字符串 WebFontConfig 来指示 AO 删除所有 JS，但我更喜欢使用主题或插件的配置。

添加 Google Web 字体

添加 Google Web 字体非常简单，只需几分钟即可完成。 首先，您需要找到要在您的网站上使用的 Google Web 字体。 找到要使用的字体后，您需要将以下代码添加到您网站的部分： 将“Roboto”替换为您要使用的Google Web 字体的名称。 将代码添加到您的网站后，您可以通过将以下 CSS 添加到您网站的样式表来使用该字体： font-family: 'Roboto', sans-serif; 将“Roboto”替换为您正在使用的 Google Web 字体的名称。 这里的所有都是它的！

谷歌字体（内容交付网络的首字母缩写）是谷歌字体的在线库。 它允许我们从各种字体系列中进行选择。 有关 Google 字体的更多信息，请参阅以下部分。 如果您使用多种 Google 字体，则需要将链接复制到 HTML 文件的头部，然后将其粘贴到多种 Google 字体区域。 在两种不同的 Google 字体之间进行选择：Comforter 和 Open Sans。 要设置 CSS 规则的样式，请使用元素选择器使它们按需要显示。 在以下代码段中，将有相应的输出。 通过在系列和类别中搜索 Google 字体，您可以创建与您喜欢的样式相对应的字体。

将 Google 字体添加到您的网站的 3 种方法

选择 Google 字体并将它们添加到您的网站。 安装 Google 字体是您网站上可用的几个选项之一。 如果要更改字体样式，请去谷歌查找字体； 然后，在字体类别和系列中，选择您想要的样式。 选择字体后，您需要复制字体链接并将其粘贴到 HTML 文件的头部。 如果您需要从其他网站导入 Google 字体，请按照以下步骤操作。 Google 字体导入允许您使用字体，而无需从您的网站复制字体链接。 通过打开 Google 字体并单击字体（带有它的卡片），您可以选择所需的样式。 在右侧，您会找到一个标有 Selected family 的容器。 当提示嵌入时，选择链接> 或导入[/链接]，具体取决于要添加字体（在 HTML 或 CSS 中）的位置。