I've been having this problem for a long time. I'm making a tinkering app with Angular, and when I import the fonts from Google Fonts (Poppins), I can't get the text to render correctly on the phone, however from my computer it looks fine.
I show you how they are rendered and then the CSS:
On the right is what it would look like when uploading from a computer (Chrome 87). On the left is how it looks from my phone (Chrome 87 too).
You can see how the thickness of the letters is smaller, the shape of the a, o and c are not geometric, and the truth is that it greatly spoils the design concept that I already had...
Now the CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
To the selectors from h1 to h6 I apply a font-family: 'Poppins';but it seems that on the phone it is ignoring them.
I also have to say that I am using the material icons library and they work perfectly, and if I debug over USB/Wifi from the phone to the PC it tells me that the source is Poppins...
Let's see if someone is able to help me, because I don't even know where to start, I've looked at the Network tab in Chrome's devtools and the source request doesn't appear, although if it's an import from CSS I don't know for sure. it should appear there.
The solution in my case was to import the CSS from a link tag in the application's index.
I don't really understand why it doesn't work with the CSS import, there is no conflict, the browser cache on the phone was empty. If I make a request with postman, it returns a css of imports with links to the source but with ttf format, if I make the request from the browser, it returns a css with woff2.
It has basically worked by changing the way you import the font. The link is the same from the
@importand<link>The network tab of the devtools already shows the source request, so fixed.