We recently noticed an unusual issue on one of our websites which was using the Doppio One font loaded from Google Fonts.
A headline which included the word “office” was displaying with a pencil icon replacing the letters ffi when viewed in the Firefox web browser. The same 3 characters also displayed wrongly, but less obviously so, in the Chrome browser, with the 3 letters displaying in the browser’s default font rather than Doppio One.
We reported the error to Google but to date the font has not been fixed. And we have since noticed that the ft ligature has exactly the same issue.
If you visit Google’s font site at https://fonts.google.com/specimen/Doppio+One?query=doppio+one&preview.text=Office&preview.text_type=custom using Firefox or Chrome you can see the issue.
The reason behind this is that fonts include variants for specific combinations of letters, known as ligatures. Ligatures allow combinations of characters that would otherwise not sit well together to be replaced by a single character or glyph. Their use predates printing; stylized character combinations have their origins in hand written script, for speed as well as visual appeal. Modern web browsers will, by default, support common ligatures if available in the font being used.
One common ligature which demonstrates their visual benefit is the fi letter combination.
Ligatures in text usually go unnoticed by the reader, which is as it should be. Their use removes letter combinations which would visually grate and distract the reader.
With Google’s version of the Dappio One font, something has gone wrong in the mapping of ligatures to alternate glyphs.
For a web developer or site owner faced with an issue like that with Doppio One, until the font is fixed there are two options: use a different font or use css to disable ligatures wherever the font is being used by using font-variant-ligatures: none.