cssinternet-explorerfirefoxwebfontstypekit

Weird characters are appearing in Firefox on Mac and Explorer on Windows


I'm having a very weird problem with one of the websites I've built. It appears on Internet Explorer on Windows, and Firefox on Mac as far as I know, perhaps other configurations as well. It concerns the Swedish characters å ä ö.

On this page: http://www.h2.se/case/kyleffekt/, the characters are being displayed properly. However on this page: http://www.h2.se/case/sun-flex/, it is not.

Screenshots for reference:

I am using Open Sans located on the Google Fonts service, and I'm also using Omnes-Pro for headlines through Typekit.

The page is built in WordPress, not sure if that matters.

Has anyone ever come across this problem before? I've seen it mentioned in a few places online but no one has ever posted a solution or indeed the cause of this seemingly weird glitch. I've tried looking at the HTTP headers for the pages but I can't find anything.

The weirdest part of it all, is that it works on one page but not the other, and only in specific browsers.


Solution

  • That’s because in the one document, you have the actual ö character, whereas in the other you have an o followed by the Unicode sequence for “put umlaut dots on the previous character” – and not all browser handle that equally well. (I often see this happening, when content is copied into an HTML document from different sources – like with PDFs on a Mac it happens regularly.)

    Unicode equivalence would be the keyword here, resp. Unicode normalization, if you intend on doing something about it using your application logic. (If you just want to get this work work for the document in question, then you’re probably better off by just re-typing those characters in your editor.)