Roboto from Materializecss Weird Font Rendering in Chrome, Firefox, Ok with Ie

Display Issues with Roboto Font from Materialize in Firefox

I finally had some time available to look into this a bit more, it appears that some of the font files in the materialize repository are defective. I was able to completely resolve this issue simply by replacing the font files in the dist/font/roboto directory with the same files available at roboto-fontface-bower. Just pull from any of the version branches v0.3.0 or better.

Hope this helps anyone else who has been frustrated by this.

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.



Related Topics



Leave a reply



Submit