将谷歌字体导入SCSS模块后无法使用，请求排查解决

以下是几个可能导致字体不生效的原因及对应解决方案：

• 路径错误
  检查fonts.scss中url(./Fonts/PollerOne.ttf)的相对路径是否正确。比如如果fonts.scss位于src/styles/目录下，而Fonts文件夹在src/根目录，那么路径应该改为../Fonts/PollerOne.ttf（向上跳出styles目录）。可以通过浏览器开发者工具的「网络」面板查看字体文件是否404，来确认路径是否正确。

• format值错误
  ttf字体对应的format值应该是"truetype"，而非"ttf"，浏览器无法识别缩写的format值。修正后的@font-face代码：

  @font-face {
    font-family: "Poller One";
    src: local("Poller One"), url(./Fonts/PollerOne.ttf) format("truetype");
  }
  
  @font-face {
    font-family: "RaleWay";
    src: local("RaleWay"), url(./Fonts/Raleway.ttf) format("truetype");
  }
  

• 字体名引用问题
  当字体名称包含空格时，建议在使用时加上引号，避免解析歧义：

  h1 {
    font-family: "Poller One";
  }
  

• 本地字体冲突
  local("Poller One")会优先加载本地已安装的同名字体，如果本地字体存在异常或名称不匹配，可能导致自定义字体无法加载。可以暂时移除local()部分，仅保留url加载：

  @font-face {
    font-family: "Poller One";
    src: url(./Fonts/PollerOne.ttf) format("truetype");
  }
  

• 文件名称/大小写不匹配
  确认本地字体文件的文件名、大小写与代码中的完全一致（比如PollerOne.ttf和pollerone.ttf在Linux/macOS系统下是不同的文件），同时检查文件是否确实存在于指定路径中。

• CSS模块导入路径验证
  检查home.module.scss中的@import "../../fonts.scss"路径是否正确。可以通过尝试在全局样式文件中导入fonts.scss并使用字体，来排除CSS模块作用域的影响。

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