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

如何在WordPress轻松安装新字体？

admin
CMS教程
2025-06-14
2947

在电脑上安装字体需通过系统设置（如Windows控制面板或macOS字体册），上传字体文件即可，但WordPress网站使用字体需额外步骤：通过主题自定义添加CSS代码调用字体，或使用插件上传网络字体文件实现网页显示。

在WordPress网站上安装自定义字体能提升设计独特性和品牌一致性,以下是详细方法及注意事项：

推荐方法：使用插件（适合所有用户）

推荐插件：

Easy Google Fonts（免费）
- 安装：后台→插件→安装插件→搜索名称→激活
- 使用：外观→自定义→排版→选择字体（直接集成Google Fonts库）
Use Any Font（免费/付费）
- 上传字体：插件设置→上传.woff/.ttf文件→自动转换格式
- 应用字体：创建CSS选择器（如body或.post-title）

优势：无需代码，自动处理版权合规和浏览器兼容。

手动添加字体（适合开发者）

步骤：

上传字体文件
- 通过FTP将字体文件（.woff2, .woff, .ttf）传到主题文件夹：/wp-content/themes/your-theme/fonts/

编辑主题CSS
在外观→主题文件编辑器→style.css添加：

如何在WordPress轻松安装新字体？第1张

@font-face {
  font-family: 'YourFont';
  src: url('fonts/YourFont.woff2') format('woff2'),
       url('fonts/YourFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'YourFont', sans-serif;
}

通过函数集成（更安全）
编辑主题的functions.php：

function add_custom_fonts() {
  wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/fonts/fonts.css');
}
add_action('wp_enqueue_scripts', 'add_custom_fonts');

在/fonts/目录下创建fonts.css存放@font-face规则。

使用Google Fonts（最简便）

通过主题集成
许多主题（如Astra、GeneratePress）在自定义设置中直接提供Google Fonts选项。

手动嵌入
在<head>中添加链接（编辑header.php）：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

在CSS中调用：

body { font-family: 'Roboto', sans-serif; }

关键注意事项

版权合规
- 仅使用开源字体（如Google Fonts）或购买商用授权
- 避免从不明来源下载字体
性能优化
- 限制字体数量（建议≤3种）
- 优先选择.woff2格式（体积小）
- 使用preload加速加载：
```
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
```
浏览器兼容
- 提供多格式源（.woff2, .woff）
- 测试工具：CrossBrowserTesting
备份与安全
- 修改文件前备份主题
- 子主题推荐：防止主题更新丢失设置