Search code examples
htmlcssgoogle-chromefont-face

font-face not showing some characters correctly in Chrome

I have imported a font in my code like this:

@font-face {
    font-family: 'BYekan';
    src: url('/Contents/Fonts/BYekan.eot');
    src: url('/Contents/Fonts/BYekan.woff') format('woff'),url('/Contents/Fonts/BYekan.ttf') format('truetype'),url('/Contents/Fonts/BYekan.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

When I run my code in Chrome, sometimes some characters are shown like squares.

enter image description here

As soon as I resize the window, the characters go normal and they're displayed correctly!

I have <meta charset="utf-8"> in my code so the problem is somewhere else.

Any ideas? Thanx in advance.

Solution

  • Found the solution!

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

    So I just set font-size something else (for example font-size: 1.001em) and now the fonts are displayed correctly :)