1

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?

neoMagic
  • 420
  • 4
  • 9
  • A [mojibake](https://en.wikipedia.org/wiki/Mojibake) case; here's a Python proof: `'€'.encode('mac_roman').decode('cp1252')` returns `'Û'`. BTW, Html numeric entities for the *Euro Sign* should be `€` or `€`. – JosefZ Feb 09 '21 at 11:08

2 Answers2

4

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).

Adriaan
  • 17,741
  • 7
  • 42
  • 75
neoMagic
  • 420
  • 4
  • 9
0

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

Adriaan
  • 17,741
  • 7
  • 42
  • 75
Nicolas Facciolo
  • 130
  • 1
  • 7