Anyone interested in typography will probably ask me this question:

Why is there no ligature for “fi” in the site title, de finibus?

And for some time I thought the answer was: “I would like to, but Adagio Serif does not come with one.”

Which is completely wrong. Adagio Serif has a ligature for “fi”, as its style really asks for one.

It leads me to investigate why I don’t see ligatures in my website.

First experiments

There are lots of CSS options related to ligatures. A helpful documentation can be found in the Mozilla website.

I tried various combinations, but to no avail.

Diagnosis

Then it came to me that maybe the desktop version of Adagio Serif is different from the webfont version. I used fontforge to open both, and indeed, the former contains OpenType lookups, while the latter contains none. Obviously, browsers cannot display the ligatures if the required metadata is not provided at all.

I then downloaded the Adagio Serif webfont kit again, and it does contain the OpenType lookups as well.

I remember the difference between the newly downloaded webfont kit and the one I was using though: the latter was “customized” through the MyFonts webfont kit customizer. Could it be the difference? I tried to use the customizer again, and whoops, it did not contain the lookups.

So it seems that the culprit is the customizer. Still, it is incomprehensible since the default webfont kit and the customized one are obviously created by the same program.

I then messed around the available options in the customizer, but none of the visible options seem to make any difference.

The answer

…until I accidentally clicked on one of the “previews”. It turned out that the font style preview texts double as buttons of an accordion-like control. Beneath each of these preview text lines, there are a few font subsetting options, with the default being to include only ASCII characters and no lookups.

It is completely a front end anti-pattern, I would say. If something looks like a typeface preview, it should not function as a button. It is stupid to hide important options beneath it, and the default values are hardly sane.

As I updated my webfont kit, the ligatures are back!

There are a few problems remaining with the kit. I am required to call their counter API, which increased my page load time significantly, but apparently they are not even counting. And similar services like FontSpring have already made the point that self-hosting webfont kits should not rely on these stupid counters. And FontSpring sells Adagio Serif as well. I’ll wait and see if MyFonts can come up with something saner. For now, I’ll live with it.

Appendix: Back to CSS

A few days later I noticed that the ligatures do not work in Microsoft Edge. It turns out that every other browser enabled the ligature because Kahuna rightfully adds the following CSS clause:

text-rendering: optimizeLegibility;

The corresponding documentation can be found in the Mozilla website as well. But here comes the caveat: the property is not standardized at all! Everyone else supports it because it is part of the SVG standard. But since this is outside any SVG element, I cannot blame Edge for not supporting it at all.

The other solution seems to be the aforementioned font-variant-ligatures property, which is part of the upcoming CSS standard. Again, it is not a standard yet, and Edge refuses to support it as well.

Fortunately there is a way out. font-feature-settings exists and while also part of the upcoming CSS standard, they do have pretty universal support across browsers. Problem solved.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.