fontscreate-react-appwebfonts

Create react app how to make font accessible on other devices

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.

Solution

  • 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.

    enter image description here