[SOLVED] Roboto font not working in Safari or Mobile browsers after deployment on Netlify

Roboto font not working in Safari or Mobile browsers after deployment on Netlify

Pulling my hair out here.

I'm new to React, I have my font family in my css like this. Everything is fine on localhost but when I deploy, the Roboto font doesnt work on safari or mobile browsers...

any help would be greatly appreciated

Thanks

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif !important;
  border: none;
}

also i'm using styled components, i'm not too sure if that has anything to do with it.

Solution

If the above solution did not work:

Try downloading the font font instead of importing the font this might work ( procedure mentioned below in 3rd point ). Some other things you should check is in this SO question: A related question from Stack Overflow

You should also include font-weight and font-style properties(worked for some)

It should look something like this:

font-family: 'Roboto Sans', sans-serif;
font-weight:900;
font-style:italic;

If you are importing the font font in the css file like this:

 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')

then change it and import it in the html file in the <head> tag or just follow the code:

<head>
 <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" 
  rel="stylesheet">
</head>

If all of the above fails then download the font from google fonts and do this in your root css file

 @font-face {
 font-family: 'Font_name';
 font-style: normal;
 font-weight: normal;
 src: local('Font_name'), url('Font_name.woff') 
 format('woff');
 }

*{
  font-family: Font_name
 }

After downloading the font from google fonts do not forget to move the .woff files to project directory else its not going to work
I tested it out on app.lambdatest.com and it worked well and the screen shot of the result is here: