0

Embedded Opensans font in my site. It's display fine in chrome, but not display properly in firefox. In firefox font display like blurred. 

@font-face {
    font-family: 'opensans';
    src: url('../fonts/OpenSans-Regular.eot');
    src: local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-Regular.ttf') format('truetype'),
        url('../fonts/OpenSans-Regular.woff') format('woff'),
        url('../fonts/OpenSans-Regular.otf') format('open-truetype'),
        url('../fonts/OpenSans-Regular.svg#opensans') format('svg');
    font-weight: normal;
    font-style: normal;
}

Not only opensans font , i tried two more fonts it's also have same problem. But other site displayed fine. Please help me. Thanks in advance.

dimcookies
  • 1,930
  • 7
  • 31
  • 37
user_82111321
  • 63
  • 1
  • 1
  • 9
  • possible duplicate of [css @font-face not working with firefox](http://stackoverflow.com/questions/14785088/css-font-face-not-working-with-firefox) – Harry Dec 01 '14 at 08:48
  • Show a *complete* example, with HTML and CSS code, and identify the source of the font and the tool used to generate the font files. You might want to *first* check whether the problem also appears when using Open Sans as hosted by Google. – Jukka K. Korpela Dec 01 '14 at 10:19

1 Answers1

0

I'm using:

@font-face {
    font-family: OpenSans;
    src: url(../fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face {
    font-family: OpenSansLight;
    src: url(../fonts/open-sans/OpenSans-Light.ttf);
}

@font-face {
    font-family: OpenSansBold;
    src: url(../fonts/open-sans/OpenSans-Bold.ttf);
}

All works fine with that. You could look in the elements console if all resources are loaded correctly.

Chryb
  • 547
  • 1
  • 12
  • 34