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

Question

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.

Please post the link to your webapp. – Prathamesh Koshti Nov 10 '20 at 12:04 — Prathamesh Koshti, Nov 10 '20 at 12:04

Gayatri Dipali · Answer 1 · 2020-11-10T13:23:54.973

1

EDIT: You dont have to have do anything, just your css rules is wrong in the production build

Your Code:

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

You told that this is your code but in the deployed version it says font-family: "Roboto" just fix this and it might work or follow the bellow instructions

edited Nov 10 '20 at 13:23

answered Nov 10 '20 at 12:18

Gayatri Dipali

1,171
4
16

Don't forget to upvote helpful answers and accept when you can the ones that solved your problem. Glad to help! – Gayatri Dipali Nov 10 '20 at 13:52

score 1 · Accepted Answer · answered Nov 10 '20 at 13:24

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:

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

2 Answers2