Outfit 字体完整指南：9 种字重免费商用，3 分钟装进系统

Outfit 字体完整指南：9 种字重免费商用，3 分钟装进系统

【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts

Outfit 字体是品牌公司 outfit.io 的官方几何无衬线字体（笔画由圆和直线构成，天生带品牌感），Thin(100) 到 Black(900) 共 9 种字重，OFL 授权可免费商用。适合做网页、App 和品牌视觉的开发者与设计师。读完 3 分钟，装好并跑起来。

🎯 为什么是它

图右侧列全了 9 个字重；上方 "outfit" 字标正是这款字体参考的标志。

• 字重不够用、层级显廉价：不少开源字族只有 3~4 个字重，层级只能靠伪粗体凑 → Outfit 字体 100~900 共 9 档，层级一次到位。
• 商用授权贵：商业字体授权动辄上千 → OFL 1.1 授权（见 OFL.txt），商用、嵌入、再分发全免费。
• 格式东拼西凑：网页要 woff2、桌面要 otf、App 要 ttf，到处找 → fonts/ 目录 4 套现成，一个仓库全覆盖。

🚀 3 步装进系统

第 1 步：拿到字体文件

克隆仓库，字体全在里面。

git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts

第 2 步：选对格式

• 桌面设计（Figma / PS）：otf/
• Android / iOS：ttf/
• 网页：webfonts/（woff2，网页专用压缩字体格式）
• 需要字重动画：variable/（可变字体（一个文件里装下所有粗细，不用切文件））

第 3 步：装进系统

Windows：拷进C:\Windows\Fonts；macOS：双击选"安装字体"。Linux：

cp fonts/ttf/*.ttf ~/.local/share/fonts/ fc-cache -f

重启设计软件，字体列表输入 "Outfit" 就能找到。

🌐 落地三招

网页里一行 @font-face

网页项目用一条 @font-face 声明 Regular：

@font-face { font-family: "Outfit"; src: url("fonts/webfonts/Outfit-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

之后font-weight: 300~900对应引用各字重文件；swap 让后备文字先显示，页面不白屏。

同样是 "bold / thin"，粗体像喊话，细体像耳语。

Android 给 TextView 指定字重

ttf 放进 assets 目录，两行指定字重：

Typeface t = Typeface.createFromAsset(getAssets(), "fonts/Outfit-Bold.ttf"); textView.setTypeface(t);

iOS 同理：UIFont(name: "Outfit-Bold", size: 16)。

可变字体做悬停动画

Outfit[wght].woff2一个文件覆盖 100~900，悬停渐粗只需两行：

.heading { font-variation-settings: "wght" 400; transition: font-variation-settings .3s; } .heading:hover { font-variation-settings: "wght" 800; }

静态字族做不了这种"变粗"交互，可变字体一个文件就做到。

🛠 少踩坑

• 装好了但软件里看不到：字体列表常缓存 → 重启软件；Linux 再执行一次fc-cache -f。
• 网页字体加载慢：多个字重请求拖慢首屏 → 只引用到的字重，或改用可变字体压成一个文件。
• 拿不准选哪个字重：正文 Regular(400)，标题比正文高 2 档（600 或 700），再按视觉节奏微调。
• 想本地重编字体：源文件在 sources/，根目录 Makefile 里make build出字体，make test跑 FontBakery（字体质检工具）检查。

Outfit 字体用 9 种字重 + 4 种格式 + 免费商用授权，把"品牌感"写进了字体里。克隆仓库，挑一个格式装进系统，今天的设计稿就能换上它：git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts

【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts