Local font looks different on iPhone
Unanswered
larkx posted this in #help-forum
larkxOP
Hi, I'm using a local font (Satoshi) (.woff2 variable) in my nextjs web app, and when testing on iphones (maybe android too idk), the fonts look different. Can anyone help me with why? I attached photos of my site running in a smaller vw on my browser, and then on my simulator.
BTW, it should look like how it does in the browser, not how it is on the phone.
BTW, it should look like how it does in the browser, not how it is on the phone.
2 Replies
larkxOP
Still waiting... any ideas?
Unless there's something weird in your css you're at the mercy of the browser rendering engine. Each one has it's own and for the most part they work the same way and the differences aren't noticeable.
One thing you can try is setting font smoothing to antialiased and text rendering to optimize legibility.
For reference:
https://usabilitypost.com/2010/08/26/font-smoothing/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
One thing you can try is setting font smoothing to antialiased and text rendering to optimize legibility.
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;For reference:
https://usabilitypost.com/2010/08/26/font-smoothing/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering