neoMagic
neoMagic

Reputation: 420

Euro sign (€) is rendered as Û, only on iPhone

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:

€ 
&euro; 
&#128; 
&#0128;

What am I missing here?

Upvotes: 1

Views: 1189

Answers (2)

neoMagic
neoMagic

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

Nicolas Facciolo
Nicolas Facciolo

Reputation: 306

You need to remove both the .woff and .woff2 font types in your CSS.

Upvotes: 0

Related Questions