Particular letters overlap in the output

[ArjunAce]

If small letter 'f' is followed by small letter 'i', then in the canvas, 'i' overlaps 'f' and the space for 'i' is left blank.

Input from webpage (as text):

Output:

OS: Windows 10 64-bit
Browser: Google Chrome 63.0.3239.132

[olecom]

@ArjunAce Please check this fix:
#1085

[ArjunAce]

@olecom Thanks for your reply.
I checked #1085 and this seems to solve the overlapping issue. But this causes another problem.
Output before implementing the fix (Expected output):

Output with CSS property 'font-variant-ligatures:none' as proposed in the fix: