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
Hovered Element to Overflow Out from an Overflow:Hidden Element CSS
Javafx: Styling Application with CSS Selectors
Django, Content Security Policy Directive
Floated Image to Left of a Ul Is Ignoring Margin/Padding
How to Make a Div Full Screen and Scrollable
Block Elements Only Inside Flex Item
How to Show Md-Toast with Background Color
Overriding CSS Properties That Don't Have Default Values
Text in Outlook Doesn't Use Line-Height
CSS: #Id .Class Vs .Class Performance. Which Is Better
Font Awesome Icons Not Working in Osx Safari
How to Color The Asterix First Character in a P Tag
Flex: Justify-Content: Space-Around But Full Size on Both Ends
Overriding CSS on Github Pages Using Slate Theme
Horizontal Scrollbar Only Appearing at Bottom of Page