在Google Web Designer中添加HTML5自定义字体失败求助

先处理字体文件灰色的问题 #

• 字体文件呈灰色，说明Google Web Designer（GWD）未将其识别为可引用的项目资源，需手动添加到项目资源库：
  1. 打开GWD左侧「资源」面板（未显示可按Ctrl+Shift+R/Cmd+Shift+R调出）
  2. 右键点击资源面板空白处，选择「添加文件」，选中你的字体文件完成导入
  3. 导入后字体文件会恢复正常颜色，此时GWD才会确保打包发布时包含该文件

修正@font-face代码的正确写法 #

GWD对资源路径有严格要求，直接写相对路径可能失效，按以下方式调整：

• 右键资源面板中的字体文件，选择「复制路径」，把复制到的路径替换@font-face里的url值
• 同时必须在需要使用该字体的元素上明确指定font-family，示例代码：

@font-face {
  font-family: "Italian Plate No2-Black";
  src: url("这里替换成复制的字体路径") format("truetype");
}

/* 给需要用该字体的元素设置样式 */
.custom-text {
  font-family: "Italian Plate No2-Black", sans-serif;
}

额外排查要点 #

• 字体文件名避免空格或特殊字符，保持纯字母数字+连字符/下划线的命名规则
• GWD编辑器预览可能存在字体显示延迟，导出HTML后用浏览器打开测试更准确
• 若使用OTF格式，需把format("truetype")改为format("opentype")

内容的提问来源于stack exchange，提问作者julia.badcoder