@font-face引用Roboto字体不生效，是否有语法错误或遗漏配置？

• 首先修正字体路径错误
  你的CSS文件存放在styles/目录下，@font-face规则中的资源路径是相对于CSS文件自身位置解析的，你写的/fonts/Roboto-Regular.ttf为根路径绝对路径，若项目未部署在域名根目录、或是本地用文件协议（file://开头）打开页面时，都会无法找到字体文件。
  修正为相对路径即可：

  @font-face {
      font-family: GoogleRob;
      src: url('../fonts/Roboto-Regular.ttf') format('truetype');
      /* 补充字体样式声明，避免浏览器匹配异常 */
      font-weight: normal;
      font-style: normal;
  }
  

• 检查本地访问协议
  直接双击打开HTML文件用文件协议访问时，部分浏览器会因安全策略限制加载本地字体文件，建议用本地服务启动项目：比如使用VS Code的Live Server插件，或在项目根目录执行npx serve，通过http协议访问即可。
• 确认SCSS已正确编译
  你使用SCSS编写样式，需确认修改SCSS文件后已经成功编译为styles/style.css，或是watch.sh监听脚本正常运行，保证加载的CSS是最新版本。
• 排查缓存与请求报错
  按Ctrl+Shift+R强制刷新页面清除缓存，也可以打开浏览器控制台的「网络」面板，筛选font类型请求，查看字体文件是否存在404、跨域等加载报错。

内容的提问来源于stack exchange，提问作者Tahmin Ahmed