React.js无法显示本地Roboto字体问题求助

我正尝试将字体引入方式从在线链接改为本地文件引入，Chrome开发者工具显示当前字体族为Roboto，但页面仍显示系统默认字体。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto';
}

.app {
    background-color: $white-color;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    
    z-index: 1;
    flex-direction: column;
}

.linkRoute {
    color: $fontGrey02-color;
    text-decoration: none;
}

//remove scrollbar space to hide Scrollbar
::-webkit-scrollbar {
    width: 0px;
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('.././fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('.././fonts/roboto-v30-latin-regular.eot') format('embedded-opentype'), /* IE6-IE8 */
         url('.././fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('.././fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('.././fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('.././fonts/roboto-v30-latin-regular.svg') format('svg'); /* Legacy iOS */
}

排查与解决思路 #

• 修正字体文件路径：.././fonts/的写法冗余且可能出错，建议简化为../fonts/（根据CSS文件与字体文件的实际层级调整）。打开Chrome开发者工具「网络」面板，刷新页面搜索字体文件名，若返回404，说明路径错误，需对应修改。
• 调整@font-face位置：把@font-face定义移到CSS最顶部，确保在*选择器调用font-family: 'Roboto'前完成字体加载定义。
• 优化local()配置：将local('')改为local('Roboto Regular')，匹配系统字体名称（若本地安装该字体），同时确保本地字体文件能正常读取。
• 添加字体回退：修改font-family为font-family: 'Roboto', sans-serif;，通过回退字体明确区分是否是Roboto加载失败。
• 验证字体文件完整性：重新从官方渠道下载完整Roboto字体包，替换现有文件，排除文件损坏问题。

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