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

Mac如何给WordPress添加字体

在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字体）

操作步骤：

  1. 安装插件
    在Mac的Safari/Chrome中登录WordPress后台 → 左侧菜单「插件」→「安装插件」→ 搜索插件名称 → 安装并激活

  2. 上传字体文件

    • 将字体文件（.ttf/.otf）保存在Mac的下载文件夹
    • 进入插件设置页（如Use Any Font的「Add Fonts」选项）
    • 点击「Upload Font」→ 从Mac选择文件 → 自动转换为网页格式（WOFF/WOFF2）

  3. 应用字体

    Mac如何给WordPress添加字体 第1张

    • 在插件控制面板勾选需应用的页面（如文章/标题）
    • 在WordPress定制器（外观→自定义）的排版设置中激活新字体
    • 实时预览后点击「发布」

优势：

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

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

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

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

操作流程：

  1. 上传字体文件

    Mac如何给WordPress添加字体 第2张

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

  2. 编辑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; /* 避免布局偏移 */
}

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

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

关键风险防控：

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

调用Google Fonts（最简方案）

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

Mac如何给WordPress添加字体 第3张

  1. 插件法（如Elementor）

    在页面编辑器字体下拉菜单 → 点击「Google Fonts」→ 搜索并应用字体

  2. 手动嵌入：

    • 在Google Fonts官网选择字体 → 复制<link>代码
    • 进入WordPress后台「外观」→「主题文件编辑器」→ 粘贴到header.php的<head>标签内
    • 在CSS中调用：font-family: 'Open Sans', sans-serif;

常见问题排查

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

最佳实践建议

  1. 性能优先：单个页面字体文件总大小控制在300KB内（可用Font Squirrel压缩）
  2. 版权合规：商用需确认授权（推荐Google Fonts/Adobe Fonts免授权）
  3. 多端测试：在Mac的Safari、Chrome及iOS设备检查渲染一致性

引用说明：本文方法参考WordPress官方文档《Using Web Fonts》、Google Developers《Web Fonts Optimization Guide》及插件开发文档，字体转换工具Transfonter通过ISO 27001安全认证，数据上传10分钟后自动删除。

0

相关文章