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

Mac如何给WordPress添加字体

admin
CMS教程
2025-06-15
3115

在Mac上将字体导入WordPress：准备好字体文件（如TTF或OTF格式），通过WordPress后台的“外观”>“自定义”>“附加CSS”功能，使用@font-face规则上传并引用字体文件即可。

在Mac上将字体导入WordPress网站,可通过以下三种主流方法实现，每种方法均经过实测验证，确保在macOS系统下操作流畅且兼容主流WordPress主题：

使用字体管理插件（推荐新手）

原理：通过插件自动处理字体文件格式转换、版权合规性及CSS嵌入
推荐插件：

Use Any Font（5万+活跃安装，支持TTF/OTF/WOFF）
OMGF | Google Fonts Optimizer（专攻Google字体）

操作步骤：

安装插件
在Mac的Safari/Chrome中登录WordPress后台 → 左侧菜单「插件」→「安装插件」→ 搜索插件名称 → 安装并激活
上传字体文件
- 将字体文件（.ttf/.otf）保存在Mac的下载文件夹
- 进入插件设置页（如Use Any Font的「Add Fonts」选项）
- 点击「Upload Font」→ 从Mac选择文件 → 自动转换为网页格式（WOFF/WOFF2）
应用字体
- 在插件控制面板勾选需应用的页面（如文章/标题）
- 在WordPress定制器（外观→自定义）的排版设置中激活新字体
- 实时预览后点击「发布」

优势：

自动生成@font-face代码，规避编码错误
支持字体子集化（减少加载体积）
内置GDPR合规检测（避免法律风险）

手动代码嵌入（适合开发者）

适用场景：需精确控制字体加载或使用商业授权字体
准备工作：

获取WOFF/WOFF2格式字体（在Mac上用Transfonter在线转换）
安装FTP客户端（如Cyberduck）或使用cPanel文件管理器

操作流程：

上传字体文件
- 通过FTP连接服务器 → 进入 /wp-content/themes/子主题文件夹/fonts/（新建fonts目录）
- 将转换后的字体文件从Mac拖拽上传

编辑CSS文件

在子主题的style.css中添加代码（示例）：

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/custom-font.woff2') format('woff2'),
       url('fonts/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 避免布局偏移 */
}

调用字体
在需要的位置添加CSS规则：

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

关键风险防控：

必须使用子主题（避免主题更新覆盖修改）
添加font-display: swap保证文字FOUT（无样式文本闪烁）而非FOIT（不可见文本）
验证字体授权（商业字体需确认许可范围）

调用Google Fonts（最简方案）

无需下载字体的云端方案：

插件法（如Elementor）

在页面编辑器字体下拉菜单 → 点击「Google Fonts」→ 搜索并应用字体
手动嵌入：
- 在Google Fonts官网选择字体 → 复制<link>代码
- 进入WordPress后台「外观」→「主题文件编辑器」→ 粘贴到header.php的<head>标签内
- 在CSS中调用：font-family: 'Open Sans', sans-serif;

常见问题排查

问题现象	解决方案
字体未生效	检查CSS优先级（添加`!important`）
布局加载闪烁	启用`font-display: swap`
移动端不显示	确认字体格式含WOFF2（iOS兼容必需）
控制台提示404错误	检查FTP上传路径大小写匹配（Linux区分）