如何更改和添加WordPress字体

4. 使用@font-face

到目前为止，我们仅讨论了如何在wordPress上使用非本地服务器（即Google的服务器）的自定义字体。但是，我们推荐将字体托管在你自己的服务器上，从本地服务器将其提供给访问者。

要做到这一点，首先需要保存所要使用的字体。还记得如何下载谷歌字体的吗？其他供应商也允许你下载字体。

使用字体前，首先确保你用的是网络字体格式。即TTF、OTF、WOFF或WOFF2。如果不是正确的网页字体格式，你也可以使用这个服务把你的字体转换成任意一种支持的字体。

准备好字体文件后，需要通过FTP将其上传到WordPress网站。存储在子主题的Fonts子目录中。

然后，通过@font-face将字体加载到样式表中。看起来是这样的：

@font-face {
 font-family: Roboto;
 src: url(https://localhost/wordpress/wp-content/themes/twentytwenty-child/fonts/Roboto-Regular.ttf);
 font-weight: normal; 
}

注意：用你自己的网站上的字体名称和路径。之后，新字体就可以使用了。接下来，我们还将介绍一些可以完成此操作的插件。

5. 字体排队–“ WordPress方式”

如果你想向WordPress添加自定义字体，可以通过主题的functions.php文件和wp_enqueue_script或wp_enqueue_style函数来实现。

你可以使用Google字体提供的代码段。但是，不是将它们复制到文件中，而是通过函数将它们添加到标头中。

wp_enqueue_script和wp_enqueue_style有什么区别？顾名思义，一种用于添加脚本，一种用于样式表。使用哪种字体取决于如何从其来源中提供自定义字体。

例如，“ Google字体”提供的是字体样式表。通过以下方式将它们添加到WordPress网站：

function add_google_fonts() {
 wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap' ); 
} 

add_action( 'enqueue_block_assets', 'add_google_fonts' );

与此相反，如果提供的字体为JavaScript文件，那么需要使用wp_enqueue_script函数。下面是一个例子:

function add_custom_fonts() {
 wp_enqueue_script( 'my_custom_fonts', '//fonts.myprovider.com/open-sans.js' ); 
}
 
add_action( 'enqueue_block_assets', 'add_custom_fonts' );

如果你将上面提到的@font-face方法应用到它自己的样式表中（例如fonts.css），将它保存在你的主题文件夹中，然后在functions.php中调用它，如下所示:

function add_local_fonts() {
 wp_enqueue_style( 'local_web_fonts', get_stylesheet_directory_uri() . '/fonts.css' ); 
} 

add_action( 'enqueue_block_assets', 'add_local_fonts' );

并不难，对吧？

排队使用多个谷歌字体

警告：Google字体最近更改了它们提供的用于链接到其服务上的字体的语法。因此，在同一个函数中加入几个字体时，会出现一些问题。

wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap' );

由于&family=参数的重复，WordPress会忽略了第一个字体，只会使链接中的最后一个字体。这有点令人遗憾，希望WordPress或Google很快就会有一个官方解决方案。

目前，你有两种方法来解决这个问题。首先是将排队样式的版本设置为null如下所示：

wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap', [], null );

第二个是将你从Google字体获得的链接恢复为旧格式。可以将css2更改为css并将第一个?family=以外的所有内容替换为|来实现。看起来像这样：

wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap' );

正如前面提到的，这并不理想，但这是我们目前坚持在用的方法。

谷歌字体和GDPR

如果你运营网站，应该知道2018年生效的《GDPR》即《欧洲一般数据保护条例》。这些规则的目的是限制消费者数据的共享，以保护个人信息。

不幸的是，当在你的网站上从Google使用字体时，查看你的网站的用户IP都会自动与Google共享，并且很可能会发送到美国的服务器。在新规则下这是有问题的。

因此，如果你的网站受到GDPR规则的约束，这意味着你必须找到一种解决方案。到目前为止，你可以通过三种方式来应对这种困境：

1. 继续使用谷歌字体，并希望它是不会出问题（不推荐）。
2. 建立一种机制，允许你在用户加载谷歌字体之前获得他们的同意（并与谷歌服务器共享他们的IP）。有专门的软件。
3. 下载并在本地托管字体。这通常是最简单的解决方案，我们已经在上面提供了解决方案。

快速说明：以上内容仅视为一般性建议。如果你想百分百确定，请咨询法律专业人士。

6. 在样式表中调用自定义字体

现在字体上传到你的网站服务器，可以使用它们了。接下来就是在样式表中为新字体添加一个声明。例如，要改变标题标签的字体，可以使用如下代码：

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
 font-family: 'Roboto'; 
}

注意：请注意所使用的服务如何为字体指定CSS声明。例如，Adobe Fonts在CSS中将Open Sans称为open-sans，而在Google Fonts中则称为“ Open Sans”。

7. 在古腾堡中使用自定义字体

通过上面的代码，可以修改网站前端的字体设计外观。但是，当你在WordPress编辑器中创建内容时，它不会生效。

由于WordPress Gutenberg编辑器的主要目的是使编辑过程和最终结果之间无缝衔接。所以，古腾堡编辑器无法显示新字体是个棘手问题。

首先完成第一步，将排队字体添加到enqueue_block_assets中，而不是通常的wp_enqueue_scripts中。

这样一来，字体既可以在网站的前端使用，也可以在Gutenberg编辑器内部使用。你已经知道如何修改网站前端字体。但是，要在编辑器中进行类似的更改，还需要一下操作。

创建一个编辑器样式表

首先是为编辑器设置样式表。这是代码，该代码属于主题的functions.php文件：

add_theme_support( 'editor-styles' ); add_editor_style( 'style-editor.css' );

第一行在WordPress中添加了对编辑器样式表的支持，第二行告诉WordPress它的名称和在哪里寻找它。在本例中，style-editor.css位于主题文件夹的根目录中。

你可以随意调用该文件，也可以将其放在主题文件夹的其他位置：

add_editor_style( 'assets/css/make-gutenberg-prettier.css' );

创建了一个相同名称的文件，并将其放置在指定的位置。完成后，可以打开它，然后将自定义字体添加到Gutenberg，如下所示：

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
 font-family: 'Roboto'; 
} 

p {
 font-family: "Open Sans"; 
}

大功告成！你现在知道了如何将自定义字体手动添加到WordPress。恭喜你，这是一些高阶知识！