@font-face 生成器
选择字体文件。
使用方法用正确的方式在网站中使用自有字体
选择或拖入字体文件
.woff2、.woff、.ttf 或 .otf，可一次选多个
.woff2、.woff、.ttf 或 .otf，可一次选多个
CSS
选择文件以生成代码。
Preload (no <head>, só das fontes da primeira tela)
可用语言: 
广告
@font-face 生成器: 用途
要在网站上使用自有字体、不依赖 Google Fonts，就需要托管字体文件并用 @font-face 逐一声明。字重写错或忘了 font-display，会让文字在加载时不可见，或出现伪粗体。
选择文件后，工具会根据名称（Regular、Bold、SemiBold、Italic、700、可变）判断字重和样式，把同一变体的不同格式归到一起，生成带 font-display: swap 的规则，以及为首屏字体添加 crossorigin 的 preload 标签，并用真实字体显示预览。
使用方法
- 选择字体文件。
- 检查字体族名称、字重和文件夹。
- 复制 CSS 和 preload 标签。
使用场景
- 在网站中使用品牌字体。
- 自行托管字体，而不是使用 Google Fonts。
- 修复显示出错误粗体的字体。
常见问题
该用什么字体格式？
WOFF2。它经过压缩，并且被当前所有浏览器支持，所以大多数网站只需要它。TTF 和 OTF 也能用，但体积大得多；发布前请转换为 WOFF2。
font-display: swap 有什么用？
先用系统字体立即显示文字，等你的字体下载完成后再替换。没有它，浏览器可能会把文字隐藏几秒钟，PageSpeed 会把这指出为问题。
所有字体都要用 preload 吗？
不需要，只对首屏马上要用的字体使用，通常是一两个（正文和标题）。preload 太多会与主图争抢连接，可能让加载变得更糟。字体的 preload 需要 crossorigin 属性，即使在自己的域名下也一样。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。