如何完美在 Elementor 中添加 Gilroy 字体并支持多个字重？完整图文教程！

🔥 你是否也遇到 Elementor 默认字体不够用的问题？是否想在网站中使用大热的设计师字体 Gilroy，却不知如何设置多个字重？本篇教程将手把手教你如何一次性正确添加 Gilroy 字体的所有字重和样式，并完美在 Elementor 编辑器中使用！

💡 为什么选择 Gilroy 字体？

Gilroy 是一款现代感极强的几何无衬线字体，广泛应用于品牌设计、网页 UI、海报标题等视觉场景。其多种字重（如 Regular、Medium、Bold、Black）能满足各种排版层级需求。

🧭 操作概览

在 Elementor Pro 的 Custom Fonts（自定义字体） 功能中：

• 一个字体（如 Gilroy）只需添加一次名称；
• 每个不同的字重/风格，通过点击 “Add Static Font” 来单独上传；
• 每次添加都需要正确设置 Weight（权重）和 Style（样式）。

🧱 步骤详解

✅ 第一步：开启自定义字体功能

1. 登录 WordPress 后台
2. 进入 Elementor → Custom Fonts
   
3. 点击【Add New】，输入字体名称：Gilroy

4. 点击【添加字体】
   

✅ 第二步：准备好字体文件

你可以从官方或授权站点下载 Gilroy 全系列字体，包括：

我下载的字体如下

💡 建议保留 .ttf 或 .woff2 格式文件，浏览器兼容性更好。

✅ 第三步：上传各个字重

1. 在 Gilroy 字体设置页面下方，选择：
   • Weight: 400
   • Style: Normal
2. 上传 Gilroy-Regular.ttf
3. 点击【Add Static Font】
   

✅ 接着继续添加其他字重，如：

• Weight: 500, Style: Normal → Gilroy-Medium.ttf
• Weight: 700, Style: Normal → Gilroy-Bold.ttf
• Weight: 700, Style: Italic → Gilroy-BoldItalic.ttf

每添加一个字重/样式就点击一次【Add Static Font】。

添加好的效果如下

✅ 第四步：Elementor 中调用 Gilroy 字体

完成上传后，在 Elementor 编辑器中：

• 设置字体为：Gilroy
• 设置粗细（font-weight）：400 / 500 / 700 等，即可自动调用对应字体文件
• 设置斜体 → 会使用 Italic 字体文件
  
  

🧩 常见问题解答

❓ 用了 font-weight: 700，却不生效？

✔️ 请检查是否上传了 Gilroy-Bold.ttf 并设置为 Weight: 700。

❓ 是否要每个字重都上传？

不是必须，但建议至少上传以下组合：

• 400 Normal（正文）
• 500 Medium（小标题）
• 700 Bold（主标题）
• 400 Italic（正文斜体）

✅ 最终效果

当你在 Elementor 中设置：

font-family: 'Gilroy';
font-weight: 700;

浏览器将自动匹配 Gilroy-Bold.ttf。实现真正的多字重无缝切换，页面展示更清晰、专业！

✍️ 结语

通过本文教程，你已经掌握了如何专业级地引入 Gilroy 字体并启用多个字重样式。无论是打造品牌官网、展示型页面还是内容博客，Gilroy 字体都能让你的网页更有格调！

📌 不懂的地方欢迎留言，我可以提供导入配置表、代码生成器，甚至打包上传方案！