Yup. It's the browser that's choosing to display this. As 'gdwatson pointed out, the font can indicate which ligatures are available, but whether or not the substation occurs also depends on the typesetting engine.

So then it is the responsibility of the font to make sure that when a ligature that it made available is used that is displayed as two characters wide instead of one?

If that's the shape the font designer wants for the ligature glyph, yes. IIRC, Tonsky's Fira code is designed with this in mind (https://github.com/tonsky/FiraCode) (and Butterick specifically points this out)

But maybe it's the intent of the designer to have each glyph have the same width, not each "character", so the glyph LESS-THAN OR EQUAL TO (≤, https://www.compart.com/en/unicode/U+2264) would be the same width as < or =: it's ultimately up to the application/typesetting engine to decide whether or to substitute the character string "<=" as "≤", and to see if the font _has_ that character and how to render it to the screen.

I suppose you could have the typesetting engine choose to somehow read the two characters, note that there's a ligature substitution, and "fit" the ligature glyph into a two-character space (say, padding the glyph or horizontally stretching it), but I doubt that would be very pleasing.

But ultimately what gets displayed is up to the typesetting engine: it can choose to use or not use ligatures; it can choose the spacing between glyphs; whether to "fake" certain styles (such as italics), text justification — all sorts of behavior. Good typesetting is available in many more applications today than it was, say, 25 years ago. There was all kinds of janky behavior going on, both from the engines not using information in the fonts when it was available, and faking it or overriding it as well.

And your example about CSS and browsers is exactly this. There can be information added to indicate how things should be displayed, but it’s ultimately up to the renderer. All the tricks used to adapt to various ways browsers render the same data, and sometimes the same (font and CSS) data in different contexts (say, as part of a <p> vs part of an <input>) in the same browser.

Found an example: <https://api.slack.com/events/url_verification#markdown>

It appears to be because of `font-variant-ligatures: common-ligatures` being set on body.