在优化网站性能时,自托管 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 字体 功能,用户可以将字体本地加载,提升网站性能。如果需要支持更多的浏览器格式或去除品牌标识,本文中的修改方法可以帮助完成自定义设置。