search

sapegin / grunt-webfont

SVG to webfont converter for Grunt
MIT License
1.11k stars 210 forks source link

Class names reference wrong icon character (sorting issue) #379

Open asalant opened 6 years ago

asalant commented 6 years ago

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 https://github.com/sapegin/grunt-webfont/issues/91 that appears related but it is very old (2014).

asalant commented 6 years ago

FYI @budleigh

alampros commented 6 years ago

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

andrewfluck commented 6 years ago

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 commented 6 years ago

Hmm, it doesn't seem to change anything