跳转到主要内容

在 Figma 里用文风字体

适合谁看：用 Figma 做设计，想用文风字体库里的字的设计师和团队。

Figma 默认只带 Google 字体和部分 Apple 字体。要用文风收录的字，得先把字体装在自己电脑上。

第 1 步：下载并安装字体

  1. 到 wenfeng.org 的字体条目下载原件（标「本站下载」的），或者按条目里的链接去作者、厂商官网下载。见《下载原件和切片：什么能下、怎么用》。
  2. Figma 支持 .ttf 和 .otf。下载的压缩包里常有好几个字重，按需安装。
  3. 安装方法见《在 Windows 10 和 11 上安装和删除字体》、《在 macOS 上安装、删除和恢复字体》。

注意：网页字体用的 woff2 切片不能装进 Figma，要用原件。

第 2 步：让 Figma 读到本地字体

  • 用 Figma 桌面版：不用另外装东西。装完字体后重启 Figma。
  • 用浏览器里的 Figma：要先安装 Figma 的字体安装程序（Figma font installer，也叫 FigmaAgent），然后刷新页面。

Linux 和 ChromeOS 上的 Figma 不支持本地字体。

第 3 步：在文件里找到字体

选中文字图层，打开右侧的字体菜单，在筛选里选「Installed by you」，再搜字体名。中文字体可能要用英文名搜，例如霞鹜文楷搜「LXGW WenKai」。英文名可以在文风字体页上看到。

团队协作的坑

  • 每个人都要装同一款字、同样的字重。 有人没装，打开文件就会提示缺字体，文字会被临时替换。
  • 把字体上传到 Figma 账户或团队之前，先看许可。 上传等于把字体文件存到第三方平台，Figma 也会要求你确认有权上传。厂商禁止再分发的字体，不要上传。
  • 交接给前端时说清字体名和字重。 见《从设计稿到上线：怎么和前端对接字体》。

参考资料

  • Figma：Add a font to Figma https://help.figma.com/hc/en-us/articles/360039956894

接下来读什么