7

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.

Community
  • 1
  • 1
user3351605
  • 1,271
  • 3
  • 19
  • 30
  • Any luck on this? I'm having the same issue – Brandon Feb 09 '16 at 21:36
  • @Brandon according to https://github.com/Dogfalo/materialize/issues/2660 , it appears that it may be corrected with the next Materialize release (0.97.6). I will be waiting for that release before investigating further. – user3351605 Feb 10 '16 at 12:34
  • Just an update: release 0.97.6 does not appear to have addressed this issue. – user3351605 Apr 06 '16 at 20:15

2 Answers2

7

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.

user3351605
  • 1,271
  • 3
  • 19
  • 30
2

To me it looks like either the woff2 file has wrong offsets to the internal font tables or Firefox reads wrong offsets when parsing the offsets.

The GSUB table mentioned in the error message cannot be the main reason for the rendering problems, because it only defines glyph substitutions (like ligature composition and decomposition, alternative glyphs for the same char code, etc). The table does not contain any rendering information for standard glyphs, so if only that table fails to load, rendering of standard text should not be affected. Details about the GSUB table can be found in Microsoft's OTF specification.

Also, I get another error message when looking at this website: http://gwt-material-demo.herokuapp.com/

Firefox tells me that there is something wrong with the OS/2 table (which contains Windows font metrics). This is a completely different part of the font file, which again indicates that there is something wrong with the font structure or with reading the font structure.

So there are two things you can do:

  1. Do not use the woff2 file.

  2. Notify the Roboto and Firefox developers about the issue and hope that they will find the cause for this bug and fix it.

Waruyama
  • 3,267
  • 1
  • 32
  • 42
  • I switched from using Woff2 to Woff and it works fine now in firefox, using Webpack and file-loader. `@font-face { font-family: "Roboto-Regular"; src: url('./assets/fonts/Roboto-Regular.eot') format('eot'), url('./assets/fonts/Roboto-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('./assets/fonts/Roboto-Regular.ttf') format('truetype');/* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ }` – TetraDev Aug 17 '16 at 17:20