Bootstrap 3 blurry font and glyphicons

Question

I have a strange display of Bootstrap 3 fonts and glyphicons. The bitmaps and the font is looking some kind of blurry. The effect is visible everywhere, so I attached an example of the navbar items. This happens only on desktops with FF and Chrome. On mobile devices everything is crispy as it should be. Has anyone an idea what is happening here?

Thanks in advance, Dirk.

Answer 1

Seems to be a feature of bootstrap 3/ 4 on different desktop browsers. There are some workarounds proposed but as browser developers wont fix this issue in webkit since 2016. Read more in this of course still open issue from 2018:
https://github.com/twbs/bootstrap/issues/27955open
Possible workarounds:

• Adapted CSS for different target resolutions/browser combinations
  
• Trying to tweak fonts or use different fonts and include all possible formats for the most affected targets
  
• Edit (tweak) bootstrap sass and compile custom version
  

But unluckely no easy way

Answer 2

Сheck your own CSS. However, have a look here: https://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3