Being a developer, I had no idea what a ligature was. A ligature is a way of combining glyphs to produce more harmonized forms, typically involving the combination of lowercase “f” with another letter, such as the combined “fi”:
Using the MyFonts font called Clarendon on the Girls on the Run Northern Virginia site, certain words were rendering incorrectly on Chrome and Safari. For example, “Confident” was rendered as “Condent” and “Staff” was rendered as “Sta”.
For whatever reason, the ligatures were not rendering. After extensive Googling, and learning what ligatures were, I stumbled upon the CSS Fonts Module Level 3 and their section on Ligatures. Adding the following styles to the body declaration solved the issue, rendering the text correctly on Chrome and Safari:
-webkit-font-variant-ligatures: no-common-ligatures;font-variant-ligatures: no-common-ligatures;