CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
japortegijs
japortegijs

Reputation: 41

Bootstrap 3 vs Bootstrap 4 font rendering

I`ve been struggling with this issue for a while now, even my co-workers can't figure this out.

The live version of this app runs on Bootstrap 3 and my local version on Bootstrap 4, the HTML is exactly the same. The font on Bootstrap 4 looks so much blurry than Bootstrap 3. I`ve tried all kinds of font rendering styling, but none solved the problem.

Bootstrap 3

Bootstrap 4

You require a good pair of eyes to see the difference, but believe me, the difference is visible. Screenshots were made on the same screen.

Anyone an idea?

Thanks in advance!

Upvotes: 0

Views: 794

Answers (3)

Quan You
Quan You

Reputation: 117

Bootstrap 4 uses the system UI font.

Reference: https://github.com/twbs/bootstrap/pull/19098/commits/73e5e89e0efb938072ba3b1da5d06d0d0e659db9.
https://github.com/twbs/bootstrap/pull/19098

You might want to change back to the regular one if you think it's blurry.

Upvotes: 1

japortegijs
japortegijs

Reputation: 41

Seems to be only happening in Chrome. I guess I`ll have to deal with it. Thanks all!

Upvotes: 0

Beni Sinca
Beni Sinca

Reputation: 384

  1. You need to check for all the browsers (maybe it's just a browser thing)
  2. Also you need to check your own css. However, have a look here: https://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3

Upvotes: 1

Related Questions