想用品牌专属字体、又不想每次从外部加载?把字体文件上传到站点并让 Bricks 识别,就能在字体下拉里直接选用。本文讲添加自定义字体的做法。
自定义字体的价值
统一品牌视觉、避免外部字体依赖、提升加载稳定性。和「本地化 Google 字体」不同,这里是上传你自己的字体文件(如公司定制字体、付费商用字体),而非 Google 现成字库。
准备字体文件
准备好字体文件,优先 woff2(体积小、兼容好),必要时补 woff、ttf 做兜底。确认字体授权允许在网站上使用。
在 Bricks 中注册字体
- 把字体文件上传到站点(媒体库或主题目录均可)。
- 在 Bricks 的字体/自定义代码相关设置里,通过 @font-face 声明字体族名称与文件地址。
- 声明后,元素字体下拉里就能选到这个自定义字体族。 (Bricks 自身没有独立的「上传字体」按钮时,也可在自定义 CSS / 主题设置里用 @font-face 注入。)
与本地化 Google 字体的关系
如果你只是想用 Google 字体又不想外链,走「本地化」那条路即可;只有真正需要自有字体文件时才走自定义上传。两者都是「让字体留在自己服务器」。
小结
添加自定义字体让品牌视觉更可控:上传字体文件 → @font-face 注册 → 在 Bricks 字体下拉里选用。配合本地化思路,既好看又不被外部请求拖慢。
内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。
延伸阅读
Bricks Element Style 元素样式
教程:Bricks 每个元素都有完整样式控制——布局、排版、背景、边框、特效。带你过一遍样式面板结构,快速上手。
tutorialBricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表
教程:Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表——acf 附完整代码可直接复用,适合外贸独立站与 WordPress 开发者。
tutorialBricks 按 ACF Gallery 图片数量做动态条件输出
教程:Bricks 按 ACF Gallery 图片数量做动态条件输出——acf 附完整代码可直接复用,适合外贸独立站与 WordPress 开发者。
tutorialBricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据
教程:Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据——acf 附完整代码可直接复用,适合外贸独立站与 WordPress 开发者。
