CODEWITHSUNDEEP
cssgoogle-chromefontsligature
Arikael
Arikael

Reputation: 2085

Ligatures in Chrome: Only displaying when adding other characters

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

enter image description here

So when I use

<i>my-ligature</i>

It works as expected in Firefox and IE but not Chrome. When I add a &nbsp; 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";
}

Upvotes: 8

Views: 4088

Answers (2)

Anil Rajan
Anil Rajan

Reputation: 41

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.

Upvotes: 2

denmch
denmch

Reputation: 1516

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.

Upvotes: 10

Related Questions