创建 react 应用程序如何使字体可在其他设备上访问

问：

我正在处理一个 react 项目，遇到了字体问题。

当我在笔记本电脑上查看该应用程序时，会显示我设置的字体，但是当我在 iPhone 上查看该应用程序时，字体将恢复为默认字体，而不是我设置的字体。

我相信这是因为字体本地安装在我的计算机上，因此我的 iphone 无法访问它？

我是这样设置字体样式的：

const useStyles = makeStyles((theme) => ({
    homeHeader: {
        fontFamily: 'PT Sans Caption',
    },
}));

有人可以给我一些关于如何添加字体的指导，以便在我在手机上打开它时显示它吗？

如果需要，我正在使用 Heroku 和 Netlify 来部署我的应用程序。