Sometimes with web fonts, the font’s default ligatures combine two characters into a single glyph, this could be making the dot on the i disappear for instance. I had this case with f and i together in the word artificial, it seems the i doesn’t have a dot. This is common in modern fonts to improve aesthetic spacing but can cause readability issues depending on the context. It can be fixed in CSS
Font rendering issue, how to fix merge letters
In our project, we used the Google font Plus Jakarta Sans, and words with the letters “fi” looked like a mistake as the letters were combined into a glyph.
We solved the issue by setting the font-variant-ligatures or font-feature-settings properties in CSS.
font-variant-ligatures: none; /* Disable ligatures */
font-feature-settings: 'liga' off; /* Alternative way to disable */There are different ways to adjust the ligatures
font-feature-settings: 'liga' off, 'dlig' off; /* Adjust ligature settings */I hope this will help you if you have similar queries from the client, your team, or QA. Happy days