当前位置：首页 > CMS教程 > 正文

WordPress怎么改默认字体？

admin
CMS教程
2025-06-21
3402

在WordPress中修改默认字体主要有两种方法：，1. **通过主题定制器**：进入“外观”>“自定义”，查找“排版”或“字体”选项直接修改并保存。，2. **添加自定义CSS**：在“外观”>“自定义”>“额外CSS”中，使用 body { font-family: "新字体"; } 代码覆盖默认样式。，若使用外部字体（如Google Fonts），需先在主题中加载字体资源。

在WordPress中修改默认字体可通过多种方法实现，以下为详细操作指南,适用于不同技术水平的用户：

通过主题自定义器修改（推荐新手）

进入主题设置
登录WordPress后台 → 外观 → 自定义 → 找到”字体”或”排版”选项（不同主题位置可能不同）。
选择目标字体
- 在字体下拉菜单中直接选择系统字体（如Arial, Georgia）
- 或点击”添加Google字体”输入字体名称（如”Roboto”）
- 实时预览效果后点击”发布”

优势：无需代码，即时生效,兼容性强。

使用插件修改（最安全便捷）

安装字体插件
推荐安装以下任一插件（均经过100万+活跃安装验证）：
- Easy Google Fonts
- Use Any Font
- Fonts Plugin | Google Fonts Typography
配置步骤：
- 安装后进入插件设置页
- 连接Google Fonts账户或上传自定义字体文件（.woff/.ttf）
- 设置应用范围（正文/标题/导航栏等）
- 保存后自动生成CSS代码

注意：插件会轻微增加加载时间,建议启用缓存优化。

手动添加CSS代码（中级用户）

定位CSS选择器
使用浏览器检查工具（Chrome按F12）查看元素对应的CSS类，

body { font-family: 'Open Sans', sans-serif; } /* 全局字体 */
h1, h2 { font-family: 'Montserrat', serif; } /* 标题字体 */

添加自定义CSS
进入 外观 → 自定义 → 附加CSS,粘贴代码：
```
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}
```
需将Roboto替换为目标字体名称，权重值（wght@400;700）控制字重。

修改functions.php文件（高级方法）

// 将以下代码添加到子主题functions.php
function add_custom_fonts() {
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );
// 应用字体到编辑器
function editor_fonts( $settings ) {
  $settings['font_formats'] = 'Noto Sans SC=Noto Sans SC;';
  return $settings;
}
add_filter( 'tiny_mce_before_init', 'editor_fonts' );

关键提示：

必须使用子主题（避免主题更新丢失修改）

中文字体需选SC（简体中文）字符集

Noto Sans SC为示例字体，需替换为实际名称

专业建议与注意事项

字体选择原则：
- 西文字体优先选Google Fonts（免费可商用）
- 中文字体推荐：思源黑体、霞鹜文楷（需确认授权）
- 最多使用2种字体组合（标题+正文）
性能优化：
- 拉丁字体文件大小 ≤ 50KB
- 中文字体使用字体子集（通过fonts.googleapis.com添加时加&subset=chinese-simplified参数）
- 添加font-display: swap;属性避免布局偏移
兼容性检查：
- 在CSS末尾添加备用字体：font-family: 'CustomFont', Arial, sans-serif;
- 测试IE11等老旧浏览器显示效果
必须备份：
- 修改前安装UpdraftPlus插件备份全站
- 或通过主机控制台备份数据库