Reputation: 420
I stumbled upon this very weird issue: I have a plain HTML-document (having <!DOCTYPE html>
and <meta charset="utf-8">
in the head) containing a price list in Euro, thus showing prices with a Euro sign (€).
No rocket science involved.
The page looks fine in every common browser and on every screen. Except for Safari on iPhone. In that browser in particular, the €
characters are rendered as Û
.
And now for the bonus: when rendering the exact same page in Safari on macOS, in mobile (responsive) view with iPhone Safari as user agent, the € signs are showing as expected.
Yes, I already checked the Content-Type in the HTTP Response. That is, as expected: Content-Type: text/html; charset=utf-8
.
It makes no difference in the iPhone output when using these variants in the html:
€
€
€
€
What am I missing here?
Upvotes: 1
Views: 1189
Reputation: 420
Turns out that there was a .woff
font type in the CSS, which looks like to be the preferred font type for Safari on a (physical!) iPhone. And apparently, this font type did not contain the Euro character, resulting in the rendering of an unexpected Û
.
After removing this one faulty .woff
font type, the issue was solved (this font was already listed with other file types as fallback as well, including .eot
, .ttf
and .svg
).
Upvotes: 4
Reputation: 306
You need to remove both the .woff
and .woff2
font types in your CSS.
Upvotes: 0