Next.js Discord

Discord Forum

Local font looks different on iPhone

Unanswered
larkx posted this in #help-forum
Open in Discord
Avatar
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.
Image
Image

2 Replies

Avatar
Still waiting... any ideas?
Avatar
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.

-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