Money-rails Gem currency symbol overlapping issue on some devices

Question

I'm using money-rails latest version. The humanized_money_with_symbol helper currency symbol overlaps with the value like shown in the image below:

Code -

p = humanized_money_with_symbol product.price

This works properly on the latest devices like MacBook, pixels, iPhones. The issue only occurs on some devices.

Gem details -

ruby '3.0.0'

rails, '~> 6.1.4'

money-rails, '~> 1.15.0'

bootstrap 5 webpack version - latest

fonts - Source Sans Pro, arial, sans-serif

Attached video link below for more details -

Money rails issue Video

Answer 1

It's not a rails issue as suggested by others in the comment section. Source sans pro font didn't support my currency symbol.

Fix - Change the font family

p.custom-font = humanized_money_with_symbol product.price