无需插件创建移动端友好的WordPress网站
lyc054211为了提升网站加载速度和保护隐私，许多站长选择将字体文件本地托管，而不依赖外部服务如 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 添加及主题和编辑器字体配置，能够实现字体的完美本地托管，提升网站视觉和性能表现。
最近更新
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
使用FTP重置WordPress管理员密码的简便方法lyc054211
使用 Astra Pro 设置 Blog / Archive 页面lyc054211
Kadence教学：7个技巧打造专业网站（2025最新指南）lyc054211 暂无评论... |
|---|