Google font working on React site but not on Mobile?-CodePudding

I've imported a font from Google that displays perfectly on desktop and across browsers, but when I test on mobile, I get default fonts.

Here's my App.css file:

@import url("https://fonts.googleapis.com/css2?family=Turret Road:wght@3000&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Turret Road" !important;
  font-weight: 3000;
  font-style: normal;
}

I've looked at similar questions, but the few solutions there are don't seem to work with React. Any ideas?

CodePudding user response：

What you need to do is put the dev tools in mobile mode, then inspect the text which doesn't have the correct font.

dev-tools style

Then go to the computed tab and scroll down to font-family. You'll be able to see all the competing styles, and the one at the top has the highest priority. You'll be able to see what is overwriting and remove it, or increase the specificity of your css targeting the font.

CodePudding user response：

Change the ':wght@3000' to '300' also, add cursive before the important tag to ensure it displays correctly.

font-family: 'Turret Road', cursive !important;