这是在本地集成 Google Fonts 的方式：与 WordPress 兼容 GDPR
Posted: Sat Dec 07, 2024 8:20 am
本地集成 Google 字体？这很有道理！
因为现在《通用数据保护条例》(GDPR)已经生效一段时间了（2018 年 5 月 25 日），任何网页设计师（或机构）都没有理由不按照数据保护条例将 Google 字体集成到自己的网站中。
2022 年 1 月更新
2022 年 1 月 20 日，慕尼黑地区法院在一项裁决
罗马尼亚手机号码中裁定，通过 Google 服务器集成字体不符合数据保护规定。因此，最好在本地集成字体或切换到系统字体。
是的：《通用数据保护条例》让我们的网页设计师受到牢牢的控制。你可以讨厌它，也可以喜欢它——唯一的是我们都必须坚持下去。因为如果有警告，下面的说法保证不适用：
“我什至不知道这一切”
但我不想在本文中讨论 GDPR 的意义或废话。事实上，Google 字体（如果通过 Google 服务器集成）理论上可以访问您的访问数据。这不符合 GDPR！
这就是为什么您必须在这里采取行动并在本地集成您的 Google 字体。这意味着您网站上的字体不再通过Google服务器加载，而是您将字体上传到您自己的网站，然后在本地加载字体。这意味着谷歌不再看到用户数据。
本地集成 Google Fonts – 工作原理如下
在本分步指南中，我将向您展示如何查找 Google 字体、在本地集成它们以及禁用 Google 字体的外部加载。
不幸的是，每个 WordPress 主题都是不同的。这意味着我们的说明无法 100% 涵盖所有情况。尽管如此，我会尝试将它们编写得如此通用，以便您也可以在本地将 Google 字体与您的 WordPress 主题集成。
了解您使用的 Google 字体
当然，第一步我们需要知道要替换哪些 Google 字体。这就是为什么我们需要识别所使用的 Google 字体。
如果您不知道自己使用的是哪种 Google 字体，可以通过多种方法进行查找。这是因为 Google 字体可以通过不同的方式集成。
如果您使用额外的插件并集成 Google Fonts，您当然会在相应插件的设置中找到字体。然而，大多数情况下，字体是通过主题集成的。在这里，您可以在主题设置中或通过定制器（设计→定制器→字体）找到它们集成到字体中。
在主题选项中找到 Google Fonts
如果您想将字体集成到 WordPress 主题中，这取决于您使用的主题。我无法在这里为所有 WordPress 主题编写说明，因为开发人员放置字体设置的位置因主题而异。
但是，对于大多数主题，应该在以下三个位置之一找到它：
设计、版式或设置下的某处
在单独的菜单项中
在设计→定制器下
如果您有页面构建器插件（例如元素器），也可能字体存储在多个位置。请务必检查所有设置。
找到相应的 Google 字体后，您应该记下您使用的字体和字体样式。
在插件中查找 Google 字体
也许您已经通过插件集成了 Google 字体。有时，甚至通过执行完全不同操作的插件也会发生这种情况。这对于开发人员来说当然是不好的形式 - 但这意味着您一定应该检查您的结果（当您完成时）。这样就不再加载 Google 字体了。
如果您不知道是否通过插件集成了 Google Fonts，只需查看您的插件列表并检查是否包含以下插件之一：
WP 谷歌字体
简单的谷歌字体
Google 地图、reCaptcha 和其他 Google 服务
然后您将找到插件设置中使用的字体。
如果您使用 Google 地图或其他 Google 服务，则会邀请外部字体。通常很难停用此功能。因此，您应该从您的网站中完全删除这些脚本和 iframe。
通过开发者控制台查找 Google Fonts
最好的方法（您将在此处找到所有字体）是通过开发人员控制台。这样做的优点是您不能忽略此处的任何字体，因为开发人员控制台会显示正在加载哪些 Google 字体。
要访问开发人员控制台，请右键单击您自己的网站，然后选择“检查元素”。顺便说一句，开发者控制台在 Chrome 和 Firefox 中可用。
对于 Chrome：单击网络选项卡。现在刷新您的网站以查看正在加载的内容。在顶部栏中，您可以激活“字体”过滤器。现在 Chrome 将向您显示正在加载的所有字体。
一旦您单击此处的字体，您将看到加载该字体的路径。
在我的示例中，我已经在本地集成了字体，并且字体是通过我的域加载的。
下载所需的 Google 字体
现在您知道您使用的是哪种 Google 字体，您应该下载它们，以便将 Google 字体本地集成到您的网络服务器上。
当然，您也可以从 Google 下载所有 Google 字体。但是，您需要某些文件类型才能在本地集成 Google Fonts。
为此，Mario Ranftl 提供了一个很棒的小工具 Google Webfonts Helper，它会自动提供相应 Google 字体所需的文件类型：
https://google-webfonts-helper.herokuapp.com/fonts
要下载您需要的字体，只需在搜索字段（左上角）中输入您想要的字体即可。然后选择相应的字符集和字体样式。
在第 3 点下，您应该指定稍后将字体上传到服务器的文件路径。这个小工具将相应地调整 CSS 文件。
在第四步中，您下载文件。
如果您在网站上使用多种字体，您当然可以根据需要多次重复此处描述的步骤。 Google Webfonts Helper Tool 将始终为您提供良好的服务:)
将 Google 字体上传到您的服务器
现在您已经下载了字体，您将在计算机上找到一个 ZIP 文件。除了 CSS 文件之外，它还包含多种字体格式（EOT、SVG、WOFF、WOFF2、TTF）。
您应该将格式上传到您自己的服务器。为此，您可以使用 FTP 程序连接到您的网络空间。确保将字体上传到先前定义的目录。
在您的网站上自定义 CSS
你快到了。将 Google 字体存储在您自己的服务器上后，您应该将字体集成到您自己的 CSS 中。 Google Webfonts Helper Tool 已经为您提供了必要的 CSS 代码。
只需将此代码包含在 style.css 文件中即可。但是，请确保您使用子主题，以便即使在更新 WordPress 主题后仍保留必要的更改。
如果您还没有使用儿童主题，那么您绝对应该这样做！
禁用与 Google Fonts 的连接
现在您必须断开与 Google 服务器的连接，因为我们已在本地集成了字体。
如果您通过插件（例如 Easy Google Fonts）集成了字体，则只需停用它即可。但是，如果您通过 WordPress 主题集成了 Google 字体，请尝试删除主题中的字体选项。
带插件
另外，当然也有一些插件可以切断与 Google 的连接。整个过程只需按一下按钮即可。
有多种插件可以停用 Google 字体的外部加载。如果您已经使用 Autoptimize（一个用于优化加载时间的好插件），您还可以使用它来删除 Google Fonts：
设置 → 自动优化 → 工具 → 删除 Google 字体
如果您使用 Perfmatters，您还会在此插件中找到用于停用 Google Fonts 的设置：
在常规 → 选项 → 字体下，您将找到“禁用 Google 字体”项目
如果您不使用上述任何插件，您可以安装一个插件。为此，只需使用以下插件之一：
禁用和删除 Google 字体
清除
安装插件并激活它 - 无需配置。
带片段
如果上述插件没有帮助您，您还可以将代码片段集成到子主题的functions.php中：
函数removeGoogleFonts(){
全局$wp_styles；
$regex = '/fonts\.googleapis\.com\/css\?family/i';
foreach($wp_styles->注册为$registered) {
if( preg_match($regex, $registered->src) ) {
wp_dequeue_style($registered->handle);
}
}
}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);
这应该适用于许多主题。使用以下主题进行了测试：Divi 主题、Herald、Brooklyn、Betheme 和 WordPress 标准主题。
检查所有 Google 字体是否已本地加载
你快到了！在最后一步中，您应该检查所有 Google 字体是否实际上已在本地集成。为此，请打开浏览器的开发人员控制台，然后在“源”下查看“字体”过滤器，从中加载 Google 字体。
请务必清除缓存，以便您的网站使用最新的 CSS 代码。
本地集成 Google Fonts 结论
由于 GDPR，您作为网站管理员被迫在本地集成 Google 字体。然而，这也导致了某些缺点：
服务器负载增加
加载时间可能会增加
可能需要安装额外的插件
由于加载时间优化和 GDPR，一些网站管理员决定使用标准系统字体。
就我个人而言，我并没有想太多。网页设计依赖于排版。我发现依赖标准系统字体在美学上非常有问题。
当然，这始终与加载时间以及用户体验有关 - 但网站的外观和感觉也应该感觉良好。
我个人觉得像 Arial 这样的标准字体很丑。毕竟，网络字体的发展之路还很漫长。
过去，网络字体只有 Arial 和 Verdana。如今，网页设计师在这里有更多的选择。谷歌还通过其字体库为使网络更具印刷性做出了贡献。
作为一名网页设计师，您应该利用这个机会。
因为现在《通用数据保护条例》(GDPR)已经生效一段时间了（2018 年 5 月 25 日），任何网页设计师（或机构）都没有理由不按照数据保护条例将 Google 字体集成到自己的网站中。
2022 年 1 月更新
2022 年 1 月 20 日，慕尼黑地区法院在一项裁决
罗马尼亚手机号码中裁定，通过 Google 服务器集成字体不符合数据保护规定。因此，最好在本地集成字体或切换到系统字体。
是的：《通用数据保护条例》让我们的网页设计师受到牢牢的控制。你可以讨厌它，也可以喜欢它——唯一的是我们都必须坚持下去。因为如果有警告，下面的说法保证不适用：
“我什至不知道这一切”
但我不想在本文中讨论 GDPR 的意义或废话。事实上，Google 字体（如果通过 Google 服务器集成）理论上可以访问您的访问数据。这不符合 GDPR！
这就是为什么您必须在这里采取行动并在本地集成您的 Google 字体。这意味着您网站上的字体不再通过Google服务器加载，而是您将字体上传到您自己的网站，然后在本地加载字体。这意味着谷歌不再看到用户数据。
本地集成 Google Fonts – 工作原理如下
在本分步指南中，我将向您展示如何查找 Google 字体、在本地集成它们以及禁用 Google 字体的外部加载。
不幸的是，每个 WordPress 主题都是不同的。这意味着我们的说明无法 100% 涵盖所有情况。尽管如此，我会尝试将它们编写得如此通用，以便您也可以在本地将 Google 字体与您的 WordPress 主题集成。
了解您使用的 Google 字体
当然，第一步我们需要知道要替换哪些 Google 字体。这就是为什么我们需要识别所使用的 Google 字体。
如果您不知道自己使用的是哪种 Google 字体，可以通过多种方法进行查找。这是因为 Google 字体可以通过不同的方式集成。
如果您使用额外的插件并集成 Google Fonts，您当然会在相应插件的设置中找到字体。然而，大多数情况下，字体是通过主题集成的。在这里，您可以在主题设置中或通过定制器（设计→定制器→字体）找到它们集成到字体中。
在主题选项中找到 Google Fonts
如果您想将字体集成到 WordPress 主题中，这取决于您使用的主题。我无法在这里为所有 WordPress 主题编写说明，因为开发人员放置字体设置的位置因主题而异。
但是，对于大多数主题，应该在以下三个位置之一找到它：
设计、版式或设置下的某处
在单独的菜单项中
在设计→定制器下
如果您有页面构建器插件（例如元素器），也可能字体存储在多个位置。请务必检查所有设置。
找到相应的 Google 字体后，您应该记下您使用的字体和字体样式。
在插件中查找 Google 字体
也许您已经通过插件集成了 Google 字体。有时，甚至通过执行完全不同操作的插件也会发生这种情况。这对于开发人员来说当然是不好的形式 - 但这意味着您一定应该检查您的结果（当您完成时）。这样就不再加载 Google 字体了。
如果您不知道是否通过插件集成了 Google Fonts，只需查看您的插件列表并检查是否包含以下插件之一：
WP 谷歌字体
简单的谷歌字体
Google 地图、reCaptcha 和其他 Google 服务
然后您将找到插件设置中使用的字体。
如果您使用 Google 地图或其他 Google 服务，则会邀请外部字体。通常很难停用此功能。因此，您应该从您的网站中完全删除这些脚本和 iframe。
通过开发者控制台查找 Google Fonts
最好的方法（您将在此处找到所有字体）是通过开发人员控制台。这样做的优点是您不能忽略此处的任何字体，因为开发人员控制台会显示正在加载哪些 Google 字体。
要访问开发人员控制台，请右键单击您自己的网站，然后选择“检查元素”。顺便说一句，开发者控制台在 Chrome 和 Firefox 中可用。
对于 Chrome：单击网络选项卡。现在刷新您的网站以查看正在加载的内容。在顶部栏中，您可以激活“字体”过滤器。现在 Chrome 将向您显示正在加载的所有字体。
一旦您单击此处的字体，您将看到加载该字体的路径。
在我的示例中，我已经在本地集成了字体，并且字体是通过我的域加载的。
下载所需的 Google 字体
现在您知道您使用的是哪种 Google 字体，您应该下载它们，以便将 Google 字体本地集成到您的网络服务器上。
当然，您也可以从 Google 下载所有 Google 字体。但是，您需要某些文件类型才能在本地集成 Google Fonts。
为此，Mario Ranftl 提供了一个很棒的小工具 Google Webfonts Helper，它会自动提供相应 Google 字体所需的文件类型：
https://google-webfonts-helper.herokuapp.com/fonts
要下载您需要的字体，只需在搜索字段（左上角）中输入您想要的字体即可。然后选择相应的字符集和字体样式。
在第 3 点下，您应该指定稍后将字体上传到服务器的文件路径。这个小工具将相应地调整 CSS 文件。
在第四步中，您下载文件。
如果您在网站上使用多种字体，您当然可以根据需要多次重复此处描述的步骤。 Google Webfonts Helper Tool 将始终为您提供良好的服务:)
将 Google 字体上传到您的服务器
现在您已经下载了字体，您将在计算机上找到一个 ZIP 文件。除了 CSS 文件之外，它还包含多种字体格式（EOT、SVG、WOFF、WOFF2、TTF）。
您应该将格式上传到您自己的服务器。为此，您可以使用 FTP 程序连接到您的网络空间。确保将字体上传到先前定义的目录。
在您的网站上自定义 CSS
你快到了。将 Google 字体存储在您自己的服务器上后，您应该将字体集成到您自己的 CSS 中。 Google Webfonts Helper Tool 已经为您提供了必要的 CSS 代码。
只需将此代码包含在 style.css 文件中即可。但是，请确保您使用子主题，以便即使在更新 WordPress 主题后仍保留必要的更改。
如果您还没有使用儿童主题，那么您绝对应该这样做！
禁用与 Google Fonts 的连接
现在您必须断开与 Google 服务器的连接，因为我们已在本地集成了字体。
如果您通过插件（例如 Easy Google Fonts）集成了字体，则只需停用它即可。但是，如果您通过 WordPress 主题集成了 Google 字体，请尝试删除主题中的字体选项。
带插件
另外，当然也有一些插件可以切断与 Google 的连接。整个过程只需按一下按钮即可。
有多种插件可以停用 Google 字体的外部加载。如果您已经使用 Autoptimize（一个用于优化加载时间的好插件），您还可以使用它来删除 Google Fonts：
设置 → 自动优化 → 工具 → 删除 Google 字体
如果您使用 Perfmatters，您还会在此插件中找到用于停用 Google Fonts 的设置：
在常规 → 选项 → 字体下，您将找到“禁用 Google 字体”项目
如果您不使用上述任何插件，您可以安装一个插件。为此，只需使用以下插件之一：
禁用和删除 Google 字体
清除
安装插件并激活它 - 无需配置。
带片段
如果上述插件没有帮助您，您还可以将代码片段集成到子主题的functions.php中：
函数removeGoogleFonts(){
全局$wp_styles；
$regex = '/fonts\.googleapis\.com\/css\?family/i';
foreach($wp_styles->注册为$registered) {
if( preg_match($regex, $registered->src) ) {
wp_dequeue_style($registered->handle);
}
}
}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);
这应该适用于许多主题。使用以下主题进行了测试：Divi 主题、Herald、Brooklyn、Betheme 和 WordPress 标准主题。
检查所有 Google 字体是否已本地加载
你快到了！在最后一步中，您应该检查所有 Google 字体是否实际上已在本地集成。为此，请打开浏览器的开发人员控制台，然后在“源”下查看“字体”过滤器，从中加载 Google 字体。
请务必清除缓存，以便您的网站使用最新的 CSS 代码。
本地集成 Google Fonts 结论
由于 GDPR，您作为网站管理员被迫在本地集成 Google 字体。然而，这也导致了某些缺点：
服务器负载增加
加载时间可能会增加
可能需要安装额外的插件
由于加载时间优化和 GDPR，一些网站管理员决定使用标准系统字体。
就我个人而言，我并没有想太多。网页设计依赖于排版。我发现依赖标准系统字体在美学上非常有问题。
当然，这始终与加载时间以及用户体验有关 - 但网站的外观和感觉也应该感觉良好。
我个人觉得像 Arial 这样的标准字体很丑。毕竟，网络字体的发展之路还很漫长。
过去，网络字体只有 Arial 和 Verdana。如今，网页设计师在这里有更多的选择。谷歌还通过其字体库为使网络更具印刷性做出了贡献。
作为一名网页设计师，您应该利用这个机会。