I heard that it is possible to have ligatures in a CSS3 @font-face icon / symbol font, but that it is not supported in IE 9 and less.
The only solution I can think of it switching the multi-letter (ligature) content for a single letter that represents the same symbol when ligatures are not supported.
Ligatures can be enabled by using browser-prefixed versions of the
font-feature-settings property or the
text-rendering property (or, in principle,
font-variant-ligatures, but this is probably not supported by any browser yet). These work both for installed fonts and downloadable fonts, provided that the font contains ligatures and information about them in OpenType format (most fonts commonly used on web pages don’t).
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.