CODEWITHSUNDEEP
htmlfirefoxunicodewebfonts
CodeBrauer
CodeBrauer

Reputation: 2925

special chars issue in firefox and IE using webfonts with utf8

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:

enter image description 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?

Upvotes: 7

Views: 2895

Answers (2)

Łukasz Madej
Łukasz Madej

Reputation: 61

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

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

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.

Upvotes: 13

Related Questions