Search code examples
htmlcssreactjsnetlifyroboto

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

    1. 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;
    1. 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>
    2. 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:

    enter image description here