Vuepress配置Nunito-SemiBold字体部署到服务器后无法显示求助

• 先补全字体引入声明
  仅配置font-family不会生效，浏览器无法定位字体文件源，需要先在index.styl中声明@font-face规则，示例如下：

  @font-face
    font-family: 'Nunito-SemiBold'
    /* 路径为字体文件相对于index.styl的相对路径 */
    src: url('../public/fonts/Nunito-SemiBold.woff2') format('woff2'),
         url('../public/fonts/Nunito-SemiBold.ttf') format('truetype')
    font-weight: normal
    font-style: normal
    font-display: swap
  

• 调整字体文件存放路径
  不要直接将字体文件放在根目录，统一放到Vuepress的静态资源目录：Vuepress 1.x/2.x均放到docs/.vuepress/public/fonts/目录下，该目录下的资源构建后会直接输出到站点根目录，路径不会被编译篡改。
• 检查样式优先级与拼写错误
  你给出的样式代码中sans-serif拼写为san-serif，拼写错误会导致兜底字体规则失效。同时Vuepress默认主题自带字体样式可能覆盖你的自定义规则，可打开浏览器控制台元素面板，查看body的计算样式是否命中你的自定义规则，未命中可提高优先级：

  body {
     font-family: "Nunito-SemiBold", Helvetica, sans-serif !important
  }
  

• 排查服务器资源访问问题
  部署后打开浏览器控制台网络面板，筛选字体类型请求，查看是否有404/403报错：404说明@font-face中的路径配置错误，调整对应路径即可；403说明服务器未开放字体格式文件的访问权限，需要配置服务器允许woff、woff2、ttf等格式的静态资源访问。
• 确认字体格式兼容性
  优先使用woff2格式的字体文件，兼容绝大多数现代浏览器且体积更小，避免使用小众字体格式导致浏览器无法识别解析。

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