Create react app how to make font accessible on other devices

Question

I am working on a react project and am having font issues.

When I view the app on my laptop, the font that I set shows up, but when I view that app on my iphone the font returns to the default font and not the one I have set.

I believe this is because the font is locally installed on my computer and because of that my iphone can't access it?

I style the font like this:

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

Can someone give me some direction on how to add my font so that it shows up when I open it on my phone?

In case it's needed, I am using Heroku and Netlify to deploy my app.

Answer 1

So you need to actually import the fonts from google using a script, if you look at Google Fonts and click on the font that you want, it will give you the script that you need to embed into your html file.