special chars issue in firefox and IE using webfonts with utf8

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.


For someone still looking for a solution to this problem in 2019, there is an ES6 solution, thats will solve all your problems :)

string.normalize('NFC')