IOS Font incompatability.

[oarina]

Apple mobile device through chrome and directly via it's native browser both are rendering Anton font differently which makes it:

1. very hard to read together with the shadow setting.
2. it spills out of a div which encroaches onto a 2nd section.
3. Anton - google font loaded seems to look more muddy than it's android version and would be bad UX.

Troubleshooting:

• Anton font will not load in my mobile phone, but nor will sans-serif.
• I have tried removing it all together and leaving only the sans-serif as a fallback and it looked better, but it was making the logo wider than I wanted it to.
• Monoscape seems to be a bit close and it is compact so it does not ruin the slogan div.
• Fantasy is not compatible. When logo and h2 (slogan and all the headings) were set to this font it would appear as Open sans in android and chrome from a laptop, but looked like a completely different font in a mobile apple device.
• Seems like monoscape fits close, but if I put 'Anton' the original font and then monoscape as fallback - the IOS still reads Anton in the same way and it remains as the original.

Solution:

• According to some sources IOS devices are around 25% of a market share as of May 2023.
• It is still sizeable market share and leaving the font is ineligible would be bad UX for all the IOS mobile users.
• Due to this I am choosing to change the font of the logo and the h2 (slogan and headings of articles) to a monoscape so that all can be read on both devices.
• I will be loosing some of the styling edge, but it less damaging than having an ineligible font for potentially 25% of your audience.

[oarina]

as mentioned above the issue was fixed by changing font on 30th of May - this should have been closed then. Closing now.