Issue with web font in Firefox

Last week i spent in switching this blog from old-classic to “flexbox” layout. Amount of css-styles decreased, html size decreased too, but i wanted more - less size for iconic webfont. I used FontAwesome as reference and created new custom font with required only icons - it takes less 6kB! But during tests one strange issue was found - one icon was broken inside Firefox (58.0.1).

Last week i spent in switching this blog from old-classic to “flexbox” layout. Amount of css-styles decreased, html size decreased too, but i wanted more - less size for iconic webfont. I used FontAwesome as reference and created new custom font with required only icons - it takes less 6kB! But during tests one strange issue was found - one icon was broken inside Firefox (58.0.1).

First i thought that it’s cache problem, then - Firefox don’t support “woff”-fonts. But cache was reset, other icons from same font rendered correctly and issue was still here. I tried to find - what difference between fonts and why my version don’t work.

Result of searches was strange. If one glyph inside font has more than one CodePoint (mount index, one glyph can be mounted in multiple places) - Firefox don’t want to render it correctly, other actual browsers renders all icons without issues. For my font it was .null-glyph with CodePoint=$00 - this codepoint was assigned to first visual icon in font. When i added empty glyph for this .null icon and checked that other icons contains only one codepoint - all icons were rendered correctly inside all browsers.