class names associated with incorrect icon

[peter-mouland]

I have noticed when using v0.3.0 the ordering of the class names are now alphabetical (nice touch), but unfortunately the wrong icons are displayed next to the class name.

The icons seem to be in the same order they would have been in 0.2.2.

[MoOx]

I don't have this issue, can you give us your icons eventually (+ grunt config) ?

[sapegin]

Do you use default fontforge engine or new node?

[nicomollet]

Same problem here.

My gruntfile:

    webfont: {
      icons: {
        src: 'assets/img/svg/*.svg',
        dest: 'assets/fonts',
        destCss: 'assets/sass',
        options: {
          font: 'IconsFont',
          stylesheet: 'scss'
        }
      }
    },

See the generated preview: https://dl.dropboxusercontent.com/u/15052756/iconsfont.JPG
Zip containing SVGs: https://dl.dropboxusercontent.com/u/15052756/iconsfontsvg.zip
Zip containing fonts: https://dl.dropboxusercontent.com/u/15052756/fonts.zip
Html preview + css: https://dl.dropboxusercontent.com/u/15052756/IconsFontpreview.zip

You will see that the telefone icon is not what it should be.
I use fontforge and webfont 0.3.0

*** Update:

Just downgraded to 0.2.2 (npm install grunt-webfont@0.2.2 --save-dev) and the icons are in the correct order. So the issue is related to 0.3.0.

[sapegin]

Thanks! I’ll look at it.

[peter-mouland]

hey - i've just tried to create a simple sample project with the same problem and failed... which means 0.3.0 seems to work out of the box. i'm wondering if it is something as simple as the css being cached and not updating properly :s I should be able to confirm this at work tomorrow.

[peter-mouland]

on my mac this seemed to work ok. on linux how ever I still run into this problem. I'm guessing fontforge version isn't the problem?

Executable based on sources from 23:14 GMT 25-Feb-2011-ML.
Library based on sources from 13:48 GMT 22-Feb-2011.
fontforge 20110225
libfontforge 20110222-ML

If you wanted to see the problem, I am using grunt-webfont in this project and have created a webfont branch:

https://github.com/skyglobal/web-toolkit/tree/webfont-0.3.0

Let me know if you would like me to trim an example project down to bare-bones fonts?

[chiqui3d]

I have the same problem in linux. With the 0.2.2 version works fine, but since version 3 does not work

[sapegin]

@nicomollet I can’t reproduce it with your SVGs and config: http://cl.ly/image/3M1u0b0n2X03

[sapegin]

@peter-mouland It would be very useful if you still experience this problem. Thanks!

[nicomollet]

@sapegin
Here is my grunt config if that helps:
{
"name": "favorit",
"version": "1.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-watch": "~0.4.3",
"grunt-contrib-compass": "~0.2.0",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-imagemin": "~0.1.4",
"grunt-parallel": "~0.1.0",
"grunt-svgmin": "~0.1.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-notify": "~0.2.13",
"grunt-webfont": "~0.2.2",
"grunt-fontcustom": "git://github.com/MoOx/grunt-fontcustom.git"
},
"engines": {
"node": ">=0.8.0"
}
}

Fontforge seems to be: 25-Feb-2011-ML

[peter-mouland]

on my mac fontforge is:

$ fontforge --version
Copyright (c) 2000-2012 by George Williams.
 Executable based on sources from 14:57 GMT 31-Jul-2012-D.
 Library based on sources from 14:57 GMT 31-Jul-2012.
fontforge 20120731
libfontforge 20120731

on my linux vm fontforge is:

$ fontforge --version
Copyright (c) 2000-2011 by George Williams.
 Executable based on sources from 23:14 GMT 25-Feb-2011-ML.
 Library based on sources from 13:48 GMT 22-Feb-2011.
fontforge 20110225
libfontforge 20110222-ML

I have created a small jekyll project that demos this problem:
https://github.com/peter-mouland/web-toolkit/tree/webfont0.3.0

[peter-mouland]

ive just finished updating fontforge to the following:

fontforge --version
Copyright (c) 2000-2012 by George Williams.
 Executable based on sources from 14:57 GMT 31-Jul-2012.
 Library based on sources from 14:57 GMT 31-Jul-2012.
fontforge 20120731
libfontforge 20120731

(which was a massive pain as sudo apt-get retrieves an old version)

unfortunately this doesnt affect the outcome

[peter-mouland]

to take a comment from issue #101 , if i turn ligatures on, it almost fixes the problem on linux, but then any font class which contains a dash in incorrect. Again, this issue isn't replicated onto my mac with the same code.

Linux ligatures:true

Linux ligatures:false

[tcditgens]

Hi there,

I've edited the generate.py and it works for me right now. Just add following function in line 50:

Could you add this in the next release?

Thanx!

[sapegin]

@tcditgens I thought that different sorting is the reason and planned to make bigger refactoring. But if this works I could make it first.

[sapegin]

I hope it’s fixed in 0.3.3. Could anybody try it?

[peter-mouland]

cool - on it now - first outlook isn't what we want, but not sure why yet. I'll investigate some more and let you know what i find

[peter-mouland]

changing the content in the css from 0xE001 to 57345 solves the problem.

I've has a play with generate.py but not yet got it to work. I'm guess we do really want the fonts to start at the hexadecimal version rather than the int?

basically:
int(args.start_codepoint, 16) returns the int which is then needed in the css.

[dtipson]

I was able to get the css version to use integers by making this change. dtipson@96a7df8

The content:"\e001" versions were all squares for me, unfortunately.

[dtipson]

My change is obviously wrong too, as parseInt('e006',16) is 57350, not 5734A. Wish I knew more about converting unicode ranges...

[dtipson]

Tried to figure it out, and hexadecimal addition in javascript is just beyond me.

To be fair, the gylph name for the glyphs in the .svg version of the generated font (example, \u57345-\u5734B, though without the u when actually used as a CSS escape) is what seems to work for the PUA range for css in chrome, rather than what's currently output (example of same range: \e001-\e007). But I can't figure out what's generating that and how to map that same functionality onto what webfont.js is doing.

[dtipson]

Ok, this fixed things for me:
dtipson@2cd746d

Basically, translates the start integer into a format that the .toString(16) function can act upon.

[getfatday]

👍 for dtipson/grunt-webfont@2cd746d

Fixed unicode numbering output.

[peter-mouland]

Cool, the guys have tested dtipson/grunt-webfont@2cd746d on our linux project and it is fixed for us 👍

[peter-mouland]

I've noticed that a few updates have been done recently, would you like us to use the git version and confirm the latest version has fixed the above issues on linux + mac?

If its fixed we could also confirm all the '... fonts dont display on [android/chrome/mac] ... ' issues that have been opened recently

[sapegin]

It would be awesome 👍

[ruanmer]

2cd746d fixed to me o/

[nibushibu]

2cd746d fixed me too (on mac)

[sapegin]

Great! I’ve just published new release to npm.

[ruanmer]

@sapegin working on 0.3.4 version!

[luruke]

I still have this problem on mac osx using the 0.3.4:
➜ fontforge -version Copyright (c) 2000-2012 by George Williams. Executable based on sources from 14:57 GMT 31-Jul-2012-D. Library based on sources from 14:57 GMT 31-Jul-2012. fontforge 20120731 libfontforge 20120731

here is the config in my gruntfile

        webfont:
            icons:
                src: "#{asset_dir}/assets/svg/**/*.svg"
                dest: "#{dest_dir}/fonts/icons"
                destCss: "#{asset_dir}/sass/app"
                options:
                    stylesheet: 'scss'
                    relativeFontPath: '../fonts/icons'
                    ligatures: false
                    engine: 'fontforge'

Setting ligatures as true, the order is correct and everything works fine, and each names corresponds to the right icon.
Unfortunately i need to support IE9...any idea?

[sapegin]

@luruke Could you send me your icons/gruntfile that I could debug?

[sapegin]

@luruke I’t already fixed in master branch but I finally could reproduce it and add some tests. Thanks!