special chars issue in firefox and IE using webfonts with utf8

Question

I have a problem with the char ü using UTF-8 encoding and the fonts "Lato" and "Open Sans".

Using safari and chrome is no problem but when I'm Firefox on Windows or Mac or IE the problem can be seen here:

"Lato" and "Open Sans" are web fonts from Google - Helvetica is a local font.

Tested it also on BrowserStack - same issue.

So how can I fix that?

Answer 1

The reason is that you have the letter “ü” represented in a decomposed form, as “u” followed by a combining diaeresis, e.g. in

<strong style="color: #CE5A5A;">Von der Gründung im Musikpark zur Marktführerschaft</strong>

Replace “ü” (U+0075 LATIN SMALL LETTER U U+0308 COMBINING DIAERESIS) by “ü” U+00FC LATIN SMALL LETTER U WITH DIAERESIS. They may well look exactly the same, but they may not – in this case, they will not, since Lato does not contain U+0308, so browsers pick it from Arial or another font, causing typographic disaster.

If you check the page with the W3C HTML5 validator, you will get a few warnings “ Text run is not in Unicode Normalization Form C.” At least one of them refers to “ä” in decomposed form (in “lädt”, which is badly displayed too), and it should be fixed too.

When you use decomposed forms for characters that exist in Unicode in precomposed form, too, such as “ä” and “ü”, the text is not in Normalization Form C (NFC). This is not invalid as such, but it is uncommon, and may cause problems like this, and it is general W3C policy (though not stated in HTML5 CR) to favor NFC.