跳转到主要内容

在 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

接下来读什么