2023-10-31

iOS Safari renders specific font not correctly

I need to use the font Machauer on my project. On desktop (Chrome/Safari) it renders correctly but not on iOS (iPhone/iPad).

Strangely on the download page of the font the same problem is happening - except for the textarea. The font is there displayed with all its details in the correct way. I wonder what is different there.

The website with textarea

textarea displayed correctly:

textarea correctly displayed

this is how it renders outside the textarea:

how it renders outside the textarea

I tried different options like text-Rendering or font-smoothing - it had no impact on iOS Safari.

This how I specified the font and used it:

@font-face {
font-family: 'Machauer';
src: url(fonts/machauer.ttf) format('truetype');
font-weight: normal;
}

h1 {
font-family: 'Machauer';
text-rendering: geometricPrecision;
}


No comments:

Post a Comment