如何在 Astra 主题中自托管 Google 字体

在优化网站性能时，自托管 Google 字体是提升速度和减少 累计布局偏移（CLS） 的有效方法。Astra 主题在 3.6.0 版本中引入了这一功能，让用户能够将 Google 字体本地化加载。本文将介绍如何启用该功能，修改默认设置，以及如何去除 Astra 品牌标识。

启用 Astra 自托管 Google 字体

Astra 提供了 自托管 Google 字体 功能，允许将 Google 字体本地存储，以 woff2 格式加载，减少外部请求并提升网站性能。

启用方法：

• 登录 WordPress 后台，进入 Astra > 设置。
• 启用 “本地加载 Google 字体” 选项。

启用后，Google 字体将直接从本地加载，减少外部请求，提升加载速度，尤其对移动设备用户而言，效果尤为显著。

如何修改 Astra 自托管 Google 字体功能

默认情况下，Astra 会将字体保存为 woff2 格式，这适用于大部分浏览器，但一些老旧浏览器（如 Internet Explorer 和 Opera Mini）不支持此格式。如果需要支持这些浏览器，或者想使用其他格式，可以按照以下步骤进行修改。

1. 更改字体文件格式

如果 woff2 格式不适用于某些浏览器，可以将字体文件格式修改为 woff，它在更多浏览器中得到支持。

修改方法：

• 打开子主题，编辑 functions.php 文件。
• 添加以下代码：

// 加载除“woff2”外的字体格式
add_filter( 'astra_local_google_fonts_format', 'update_astra_local_fonts_format' );
function update_astra_local_fonts_format( $font_format ) {
  $font_format = 'woff'; // 将格式更改为 "woff" 或其他格式。
  return $font_format;
}

这样就能使用 woff 格式加载字体，兼容更多的浏览器。

2. 白标化 Astra 自托管 Google 字体功能

Astra 默认会在字体文件夹和本地 CSS 文件名称中加入 Astra 品牌标识。如果希望去除品牌标识，进行白标化，可以使用以下代码进行修改：

• 重命名字体文件夹：

add_filter( 'astra_local_fonts_directory_name', 'update_astra_local_fonts_file_directory_name' );
function update_astra_local_fonts_file_directory_name( $folder_name ) {
  $folder_name = 'mysite'; // 将 'mysite' 改为所需的文件夹名称。
  return $folder_name;
}

• 重命名本地 CSS 文件：

add_filter( 'astra_local_font_file_name', 'update_astra_local_fonts_file_name' );
function update_astra_local_fonts_file_name( $file_name ) {
  $file_name = 'mysite-font'; // 将 'mysite-font' 改为所需的文件名称。
  return $file_name;
}

通过这些修改，字体文件夹和 CSS 文件名称将不再包含 Astra 品牌标识，完全符合自定义要求。

3. 清除缓存

完成修改后，进入 Astra > 设置 页面，并点击 “清除本地字体文件” 按钮。这将清除旧缓存，确保修改立即生效。

建议

在进行这些修改时，建议使用 子主题，以防止主题更新时丢失自定义设置。如果不确定如何设置子主题，可以参考相关教程。另外，最好在 暂存环境 中进行测试，避免直接影响正式网站。

总结

通过启用 Astra 主题的 自托管 Google 字体 功能，用户可以将字体本地加载，提升网站性能。如果需要支持更多的浏览器格式或去除品牌标识，本文中的修改方法可以帮助完成自定义设置。

最新文章

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息