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?
What you need to do is put the dev tools in mobile mode, then inspect the text which doesn't have the correct font.
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.
Change the ':wght@3000' to '300' also, add cursive before the important tag to ensure it displays correctly.
font-family: 'Turret Road', cursive !important;