Class names reference wrong icon character (sorting issue)

[asalant]

In a project that has been using grunt-webfont for a couple years without issue, we are now seeing an issue where the order in which class names are listed in the generated CSS does not match the order of the font characters in the generated font files.

The issue appears to be specific to the sorting rules for the class names in the CSS file. For example, the files:

circle.svg
circle-1.svg
circle-2.svg

are ordered in the font file in the order shown above but in the CSS (Stylus in this case) in the order:

$icon-circle-1 = "\e634"
.icon-circle-1:before
  content:"\e634"

$icon-circle-2 = "\e635"
.icon-circle-2:before
  content:"\e635"

$icon-circle = "\e636"
.icon-circle:before
  content:"\e636"

So a CSS reference to .icon-circle-1 actually renders the font charactercircle.svg as it is first in the font file.

We are using fontforge and it is not clear if the root of the issue is with a recent release of fontforge. Reverting to an older version (we were not seeing these issues the last time we generated web fonts in July 2017) produced errors that prevented running grunt-webfont at all.

Grunt task looks like:

webfont: {
      icons: {
        src: 'public/svg/icons/*.svg',
        dest: 'public/static/fonts',
        destCss: 'client/css/styleguide',
        options: {
          hashes: false,
          htmlDemo: false,
          embed: 'ttf,woff',
          startCodepoint: 0xE600,
          stylesheet: 'styl',
          relativeFontPath: '/static/fonts',
          template: './tasks/icons.template.css',
          templateOptions: {
            baseClass: 'icon',
            classPrefix: 'icon-',
          },
        },
      },
    },

Posting this issue as I have not found a similar open issue for this project or for fontforge and it appears to be new in the last 6 months or so. There is a closed issue #91 that appears related but it is very old (2014).

[asalant]

FYI @budleigh

[alampros]

Are you using the codepoints option? If not, I can you try it and see if that corrects the issue?

[andrewfluck]

This happens regardless of engine, I switched to node and the same bug happens, this is a hassle to my workflow. I will try the codepoints option @alampros

[andrewfluck]

Hmm, it doesn't seem to change anything