Search code examples
firefoxfontsfont-facematerialize

Display Issues with Roboto Font from Materialize in Firefox

I am using Materialize to style some of my web pages. I have noticed that Roboto font does not render correctly in Firefox (v43.0.3), but looks fine in Chrome. Both browsers are downloading the woff2 font file from my server, which this question seems to indicate should be the optimum choice for modern browsers.

Chrome rendering: enter image description here

Firefox rendering: enter image description here

(I realize these low-res screencaps are not the best reproduction, the differences are much more apparent in the actual browsers.)

In the Firefox console, I receive a string of error messages similar to:

downloadable font: GSUB: too large substitute: 65535 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

No complaints from Chrome.

As I am not at all familiar with the intricacies of font rendering, I was hoping that someone with some knowledge in that area might have an idea what the problem is based on the error messages from Firefox.

Solution

  • 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.