Fonts Not Properly Shown on Google Chrome

Question

I have this weird problem with Chrome. I use Bootstrap with its glyphicons and another font (BYekan) included using @font-face.

But sometimes the glyphicons and BYekan fonts appear as they should do, and sometimes an square appears instead of those fonts and as soon as I hover the mouse over the square, the correct form of glyphicons and my font BYekan appear.

I'm referring to a nearly exact copy of my question though with illustration (glyphicons icons not get suitable for chrome) which I think does not have a suitable answer.

I'm using Chrome version 32 On a Windows machine. In addition I'm using the popular Flat UI which is based on Bootstrap and the same issue applies to its web font icons too.

I think this issue is shaking my design and I'm really concerned. I wanna be clear that dismissing Flat UI or BYekan font is OFF the table and not a solution.

Answer 1

I've also experienced this issue on Bootstrap-powered sites (Twitter being a notable example). This is very likely related to a known Chromium issue. It is reported to be fixed and the fix is expected to be shipped with Chrome 33.

Answer 2

Found the solution!

If you don't set font-size for your texts, the default font size is 1em. And apparently Chrome has problems with this font size for some fonts!

So just set your font-size something else (for example font-size: 1.001em) and your fonts will be shown correctly :)