WOFF bug (broken glyphs width for some icons combinations)

[puzrin]

Sometime fontello generates broken WOFFs (glyph widths became too big). Problem is, that effect depends on glyphs combination.

---

TEMPORARY SOLUTION: change glyphs count (add something), or convert ttf -> woff with external tool.

---

config.json example:

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "glyphs": [
    {
      "uid": "d73eceadda1f594cec0536087539afbf",
      "css": "heart",
      "code": 59392,
      "src": "fontawesome"
    }
  ]
}

Comments:

• bug can disappear, if you add more glyphs to selection
• in font-builder we used left/right bearing for workraround https://github.com/fontello/font-builder/blob/master/bin/fontbuild.py#L50

[AliMD]

Not only in heart If you download two glyph its work fine But only when you download only icon-heart it happened

[puzrin]

Another config.json example (it will become ok, if you remove any symbol):

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "glyphs": [
    {
      "uid": "62c089cb34e74b3a1200bc7f5314eb4e",
      "css": "firefox",
      "code": 59395,
      "src": "fontelico"
    },
    {
      "uid": "9c2b737b16ae2c8d66b7bfd29ba5ecd8",
      "css": "chrome",
      "code": 59396,
      "src": "fontelico"
    },
    {
      "uid": "45861dd1e5ce4fde338bcccf01eeb808",
      "css": "opera",
      "code": 59397,
      "src": "fontelico"
    },
    {
      "uid": "28ccaf022b8363aeaa5b86f66e1f5173",
      "css": "skype",
      "code": 59393,
      "src": "entypo"
    },
    {
      "uid": "84f3880057574e968053d6d6c8a7b216",
      "css": "behance",
      "code": 59392,
      "src": "entypo"
    }
  ]
}

[matousjanda]

Another example of this issue.

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "glyphs": [
    {
      "uid": "4bb2045a2aca451705fe8a23c4a576ab",
      "css": "emo-wink2",
      "code": 59392,
      "src": "fontelico"
    },
    {
      "uid": "53ed8570225581269cd7eff5795e8bea",
      "css": "emo-unhappy",
      "code": 59393,
      "src": "fontelico"
    },
    {
      "uid": "2cfb3f2b46b34a1790aec0aa846297b6",
      "css": "menu",
      "code": 59394,
      "src": "entypo"
    },
    {
      "uid": "b08cfe8039de2ce815686aced2caef06",
      "css": "download",
      "code": 59395,
      "src": "entypo"
    },
    {
      "uid": "91bac16b22827347e9ee20477f0b44d2",
      "css": "mail",
      "code": 59396,
      "src": "linecons"
    }
  ]
}

[puzrin]

Reproduced with your config too. I've updated fontello site yesterday, but still don't understand, what could break fonts.

[AliMD]

@puzrin do you find the problem ?

[puzrin]

No. When i find it, this issue will be closed.

[kezabelle]

Here's another config which breaks:

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "glyphs": [
    {
      "uid": "a3f89e106175a5c5c4e9738870b12e55",
      "css": "tags",
      "code": 97,
      "src": "fontawesome"
    },
    {
      "uid": "72b1277834cba5b7944b0a6cac7ddb0d",
      "css": "feed",
      "code": 98,
      "src": "fontawesome"
    },
    {
      "uid": "94089b37297572e936b0943bcfa041d3",
      "css": "go",
      "code": 99,
      "src": "fontawesome"
    },
    {
      "uid": "6a7ed3214c9049148cbdb01825e5efc2",
      "css": "img",
      "code": 100,
      "src": "typicons"
    },
    {
      "uid": "6f200a5a449259c51cd0ccf56b4c1e93",
      "css": "weather",
      "code": 101,
      "src": "typicons"
    },
    {
      "uid": "pzy4lq1ak4datbxpdfj3ya74vjfhwxg1",
      "css": "read",
      "code": 102,
      "src": "modernpics"
    },
    {
      "uid": "981c9f3d44fd4fd6b37c0b5a981334ce",
      "css": "datetime",
      "code": 103,
      "src": "mfglabs"
    }
  ]
}

To figure out there was anything wrong, I ended up changing the glyphs to standard ASCII choices (A-G) so that I could preview which ones break easily in Chrome's dev tools. In the config above, only tags, img and weather render their glyph.

[ghost]

Not sure if this is related but this combination is giving me issues:

{
  "name": "icon",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "glyphs": [
    {
      "uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
      "css": "spin",
      "code": 59392,
      "src": "fontelico"
    },
    {
      "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
      "css": "search",
      "code": 59393,
      "src": "fontawesome"
    },
    {
      "uid": "bf882b30900da12fca090d9796bc3030",
      "css": "mail",
      "code": 59394,
      "src": "fontawesome"
    },
    {
      "uid": "7bf14281af5633a597f85b061ef1cfb9",
      "css": "right-arrow",
      "code": 59395,
      "src": "fontawesome"
    },
    {
      "uid": "8e04c98c8f5ca0a035776e3001ad2638",
      "css": "facebook",
      "code": 59396,
      "src": "fontawesome"
    },
    {
      "uid": "b8d0c7d76e87b94882329a88e8e43d3d",
      "css": "gplus",
      "code": 59400,
      "src": "fontawesome"
    },
    {
      "uid": "e9107949dd6c9e8ab2b29ae07156e38c",
      "css": "linkedin",
      "code": 59397,
      "src": "fontawesome"
    },
    {
      "uid": "627abcdb627cb1789e009c08e2678ef9",
      "css": "twitter",
      "code": 59399,
      "src": "fontawesome"
    },
    {
      "uid": "a9862b9d5197886c1ad693ecd7120b31",
      "css": "youtube",
      "code": 59398,
      "src": "fontawesome"
    }
  ]
}

[puzrin]

We are doing svg2ttf convertor now, then this bug will be fixed. Sorry for delay.

[ghost]

No problem at all, adding another icon seems to solve the issue.

[puzrin]

It seems, that WOFF bug disappeared after some fixes & replacing fonttorge with our new svg2ttf.

1. Please, test your cases, and if any problems with WOFF again - post here your new configs.
2. If you have any problems with othrer font types in different browsers/platforms - create a new ticket about.

Let me know about results. Thanks for your patience!

[puzrin]

Closing since no problems reported. Feel free to create new issue, is anything happens.