css @font-face not working with firefox

Question

The following code works in Google Chrome beta as well as IE 7 but not in firefox.

@font-face {
font-family: 'open_sans_semiboldregular';
src: url('../fonts/opensans-semibold-webfont.eot');
src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-semibold-webfont.woff') format('woff'),
     url('../fonts/opensans-semibold-webfont.ttf') format('truetype'),
     url('../fonts/opensans-semibold-webfont.svg#open_sans_semiboldregular') format('svg');

}

possible duplicate of [css @font-face not working with firefox, but working with chrome and IE](http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie) — talha2k, Feb 09 '13 at 04:56

score 0 · Answer 1 · answered Feb 09 '13 at 04:53

For an easier solution, try using Google Web Fonts: http://www.google.com/webfonts

The specific header code to include Open Sans semi-bold is:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>

And then in the CSS it would be:

body {font-family: 'Open Sans', sans-serif;}

This will not only address cross-browser compatibility, but speed up your page load due to being hosted on Google's servers.

score 0 · Accepted Answer · answered Feb 09 '13 at 05:00

try this

@font-face
{
    font-family: 'SegoeUI';
    src: url('Fonts/segoeui.eot');
    src: url('Fonts/segoeui.eot?#iefix') format('embedded-opentype'), url('fonts/segoeui.ttf') format('truetype');
}

@font-face
{
    font-family: 'SegoeLight';
    src: url('Fonts/segoeuil.eot');
    src: url('Fonts/segoeuil.eot?#iefix') format('embedded-opentype'), url('fonts/segoeuil.ttf') format('truetype');
}

css @font-face not working with firefox

2 Answers2

Linked