Ligatures in Chrome: Only displaying when adding other characters

Question

I created a font with icomoon

and I wanted to use ligatures. Currently all my ligatures have hyphens in the ligature code. For example: my-ligature

So when I use

<i>my-ligature</i>

It works as expected in Firefox and IE but not Chrome. When I add a   or any other character like

<i>my-ligature&nbsp;</i>
<i>my-ligature </li>

It also works in Chrome.

As soon as I replace the hyphen in the ligature code with something else like an underscore it works in Chrome as expected (no whitespace etc. necessary)

Is this a Chrome Bug or are hyphens not allowed here?

You'll find a demo of the whole thing here (made with a standard icomoon icon) http://www.swisscocktailblog.ch/icomoon/demo.html

EDIT: As requested the css for the ligatures (it's the one used in the demo)

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?6mfq3a');
    src:url('fonts/icomoon.eot?#iefix6mfq3a') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6mfq3a') format('truetype'),
    url('fonts/icomoon.woff?6mfq3a') format('woff'),
    url('fonts/icomoon.svg?6mfq3a#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

i, .icomoon-liga {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-wifi-full:before {
    content: "\e600";
}

Can you include your CSS, where you make sure to enable CSS3 ligatures for those `
would it also be possible for you to run your font through TTX to show that its GSUB ligature information makes sense? (i.e. kicks in for the word you need, rather than for the word you need + some character?) — Mike 'Pomax' Kamermans, Jul 31 '15 at 15:59
I see that even the iconic font of Google uses underscores and not dashes... same reason? — Fez Vrasta, Oct 31 '16 at 18:49

score 8 · Accepted Answer · answered Nov 05 '16 at 06:44

This bug has been identified elsewhere in Chromium, and more specifically affects ligatures named with non-alphabetical characters:

https://bugs.chromium.org/p/chromium/issues/detail?id=277677

It was marked fixed on that thread, but that doesn't seem to be the case.

On a hunch I checked whether the character was there but not visible by adjusting letter-spacing, and that worked. Something as negligible as the following will allow the icon to render:

i {
    letter-spacing: .001em;
}

If you apply this style to your demo page via devtools and inspect the two i elements, you'll see that the second is rendered as a sliver as compared with the first. If you add text after each you'll see that the text begins at a different point. To avoid this you could write more CSS, something like this:

i {
    display: inline-block;
    letter-spacing: .001em;
    width: 1.2em;
}

This should ensure that all of your icons render consistently in spite of the bug, and will scale properly with the font-size. But at this point it's probably best to accept as best practice that ligatures should avoid non-alphabetical characters.

While the bug's cause is still unclear, the above should provide a workable solution. The reason the additional characters allow the icon to render is that they provide the missing character spacing made up for here by the additional CSS.

Although I don't need it anymore (project was finished long ago), I checked your solution and it worked. Thanks — Arikael, Nov 08 '16 at 07:57

score 2 · Answer 2 · answered Jul 07 '17 at 08:53

2

We too have the same issue in Angular 4 when creating our own icon in chrome 59.0. using css property

{
    white-space : pre;
}

does solve this. Mozilla 54.0.1 its working fine.

answered Jul 07 '17 at 08:53

Anil Rajan

41
5

Ligatures in Chrome: Only displaying when adding other characters

2 Answers2