在 GeneratePress 主题中实现字体本地托管的完整指南

为了提升网站加载速度和保护隐私，许多站长选择将字体文件本地托管，而不依赖外部服务如 Google Fonts。本文介绍在 GeneratePress 主题环境下，字体文件下载并本地托管的具体步骤。

1. 下载字体文件

• 使用 Google Fonts Helper 等工具，搜索并选择所需字体。

• 勾选必要的字体变体，避免增加页面负担。

• 跳过 CSS 代码复制，下载字体文件压缩包并解压。

2. 上传字体文件

WordPress 媒体库默认限制字体文件上传。

推荐使用“Code Snippets”插件操作，避免直接修改主题文件带来的风险。

在插件中新增代码片段，粘贴打开字体文件上传权限的函数代码。

保存并激活该代码片段后，就能在媒体库上传所有解压后的字体文件。

添加以下 PHP 代码，临时开放字体文件上传权限（放入子主题 functions.php 或用代码片段插件管理）：

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff']  = 'application/x-font-woff';
    $mimes['woff2'] = 'font/woff2'; 
    $mimes['ttf']   = 'application/x-font-ttf';
    $mimes['svg']   = 'image/svg+xml';
    $mimes['eot']   = 'application/vnd.ms-fontobject';

    return $mimes;
} );

上传解压后的字体文件，上传后建议删除该代码。

3. 获取字体文件链接

• 复制任意字体文件完整 URL，如： http://your-site/wp-content/uploads/2019/02/font-name.woff2
• 去掉文件名，仅保留目录路径，作为 CSS 路径使用。http://your-site/wp-content/uploads/2019/02/

4. 生成并添加 @font-face CSS

让我们回到下载字体文件的 Google Fonts Helper 。

• 在 Google Fonts Helper 中填入目录路径。http://your-site/wp-content/uploads/2019/02/

• 复制生成的完整 CSS 代码。

• 粘贴至 WordPress 后台“外观” → “自定义” → “附加 CSS”，或子主题样式文件。

5. 在 GeneratePress 主题中添加本地字体

• 进入“外观” → “自定义” → “排版”。
• 添加字体名称（与 CSS font-family 一致）。

• 关闭 Google 字体选项，启用本地字体。
• 设置字体应用范围，保存生效。

6. 让本地字体在 WordPress 块编辑器显示

块编辑器默认不加载自定义 @font-face CSS。

若 CSS 在“附加 CSS”，添加代码注入编辑器：

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

若 CSS 在子主题 style.css，添加代码：

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );

完成后，编辑器即可正确显示本地字体。

总结

本地托管字体提升加载速度，减少第三方依赖。结合 GeneratePress 主题的排版功能，完成字体文件下载、上传权限开启、CSS 添加及主题和编辑器字体配置，能够实现字体的完美本地托管，提升网站视觉和性能表现。

最近更新

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