Javascript Material UI主题上设置的字体系列在除Chrome以外的浏览器上不起作用

需要用一种特定的字体覆盖某些元素，这种字体在Chrome上可以很好地工作，但不能覆盖任何其他浏览器Safari、FireFox等。有什么遗漏的吗

这是我的密码：

const theme=createMuiTheme{ MuiTypography：{ h1：{ fontFamily:“源SAN Pro” } } } }; const MyApp==>{ 回来 源SAN Pro字体应用于Chrome，但不适用于其他浏览器

---

事实证明，我在Chrome上使用的是这种字体和其他字体，而不是其他浏览器

因此，基本上，我必须完成整个舞蹈，将它们添加到我的项目中，在我的案例中。基本上：

在项目中安装字体 npm安装-S字体真棒 在项目的根目录中创建style.scss文件 在新创建的style.scss文件中导入字体： 找到我的字体 选择样式，生成链接以导入它们，然后从新创建的style.scs执行此操作 从my case index.js中的项目入口点导入style.scss文件，但也可以是app.js。 导入“./style.scss”；//此处 从“React”导入React； ... ReactDOM.render …我的应用程序。。。 ，document.querySelector'app' ; 最后还需要重建，因为我正在使用webpack

@import '~font-awesome/css/font-awesome.css';

@import '~font-awesome/css/font-awesome.css';
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,300;1,400;1,600&display=swap');