F H
会员专享 · TTF/OTF → WOFF2

TTF / OTF 转 WOFF2

会员专享

不只是格式转换：上传 TTF 或 OTF，一键得到可上线的 WebFont Kit（WOFF2 + CSS + Demo）

对准 ttf to woff2 / otf to woff2 · 订阅会员不限次数 · 标准目录 · 自动 @font-face · 可选子集

一次生成，解压即用

标准目录结构，复制到项目即可引用 css/font.css

Kit 目录结构

Inter-WebFont-Kit/
├── fonts/
│   ├── Inter-Regular.woff2
│   └── Inter-Regular.woff
├── css/font.css
├── demo/demo.html
├── license/
│   ├── license.txt
│   └── license-summary.md
└── README.md
  • ✓WOFF2 + WOFF 双格式，兼顾体积与兼容
  • ✓demo/demo.html 本地预览效果
  • ✓README.md 接入说明
  • ✓license-summary 商用风险提示

css/font.css 示例

@font-face {
  font-family: "Inter";
  src:
    url("../fonts/Inter-Regular.woff2") format("woff2"),
    url("../fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

零散转换 vs 交钥匙 Kit

自己拼凑 FontHubs WebFont Kit
找工具转 WOFF，再手写 CSS 上传 TTF/OTF，一键得到标准 Kit
自己拼目录、写 @font-face 自动生成 css/font.css（含 weight/style）
没有预览页，上线前心里没底 自带 demo/demo.html 本地验收
授权信息散落各处 license.txt + license-summary.md
子集要另开工具 同页可选子集，体积对比一目了然
开通订阅会员，跳过上述步骤

订阅会员专享 · TTF/OTF 转 WOFF2

开通 FontHubs 订阅会员后，即可不限次数将 TTF/OTF 转为含 WOFF2 的完整 WebFont Kit。您得到的不是零散字体文件，而是含路径、CSS、Demo 与授权提示的标准交付包。

查看会员方案与价格

订阅会员还可使用

一套会员，覆盖从发现字体到网站上线的常用工作流

字体子集化 字体识别（专业版） 字体版权检测 字体对比

适合转成网页字体的免费商用字体

先从详情页下载 TTF/OTF，再用本页生成 WebFont Kit

浏览更多免费商用字体

常见问题

如何把 TTF 转成 WOFF2？
上传 TTF 文件即可生成含 WOFF2（及 WOFF）的 WebFont Kit，并附带可直接引用的 @font-face CSS。比「只转一个文件」更适合网站上线。
如何把 OTF 转成 WOFF2？
同样支持 OTF → WOFF2。上传后一键得到标准 Kit：WOFF2/WOFF、CSS、Demo 与授权摘要，解压即可接入项目。
什么是 WebFont Kit？
WebFont Kit 是一套可直接部署到网站的字体包，包含 WOFF2/WOFF 文件、@font-face CSS、Demo 页面、README 与授权相关文件，目录结构符合常见前端工程习惯。
能和 FontHubs 字体详情页一起用吗？
可以。先在字体详情页下载 TTF/OTF（如 Inter、Roboto、Noto Sans），再回到本页生成 WebFont Kit，完成从选字体到网页嵌入的闭环。
需要会员才能使用吗？
是的。WebFont Kit 生成器为 FontHubs 订阅会员专享，开通后可不限次数生成。会员费用用于平台服务，不包含字体版权或额外授权，使用前请阅读 Kit 内授权文件。
和普通格式转换有什么区别？
普通转换往往只返回 WOFF/WOFF2 文件；WebFont Kit 是交钥匙交付包——标准目录、可直接引用的 CSS、Demo 预览与授权摘要，并自动解析 font-family/weight/style，更适合网站上线。
查看会员方案与价格