in the head) containing a price" /> in the head) containing a price" /> in the head) containing a price"/>

TechQA.

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

1k views Asked by At

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?

html character-encoding euro
Original Q&A
2

There are 2 answers

0
neoMagic On

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

0
Nicolas Facciolo On

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

Related Questions in HTML

Related Questions in CHARACTER-ENCODING

Related Questions in EURO

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions