Jonas de Herdt Jonas de Herdt - 17 days ago 4x
CSS Question

What is wrong with this font rendering on ios

My font looks like it's rendered twice. But when I zoom in the font corrects and looks perfectly sharp.

Here is an example. 100% at the right side. zoomed in on the left side.

I looked at the css, cant find an issue. No shadows or odd css is used on the font.

The font is ProximaNovaRgRegular.
other than this, no specific css.

-moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility;


This usually happens when you are trying to use a font-weight that is not supported.

Regular is usually font-weight:400;

If these are headings:

Apparently many mobile devices (mobile safari included) style heading tags (h1-h6) with something like font-weight: bold. If the font you are using doesn’t include a bold weight, then the browser will create a faux bold and offset that.

CSS Tricks source