CSS font-face not working in Firefox

Question

I have this font face code below and it works fine in google chrome, but it doesnt work at all in firefox? why?

    <style type="text/css">
    @font-face {
    font-family: 'Lato';
    src: url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot');
    src: url('http://www.website.com/fonts/ca/Lato-Reg.ttf') format('truetype'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.woff') format('woff'),
         url('http://www.website.com/fonts/ca/Lato-Reg-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LatoBold';
    src: url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot');
    src: url('http://www.website.com/fonts/ca/Lato-Bol.ttf') format('truetype'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.woff') format('woff'),
         url('http://www.website.com/fonts/ca/Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

nav ul li{
    font-family: 'LatoBold', sans-serif !important;
}
    </style>

 <nav id="mainNav">
            <ul class="grid_0">
                            <li>
                        <a href="http://www.website.com">Home</a>
                        </li></ul>

This should help you http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie — Jules, Nov 19 '12 at 22:15
The font files are not found, e.g. http://www.website.com/fonts/ca/Lato-Bol-webfont.woff yields an HTML response. Possibly you have magic that serves other code to other browsers. ☺ — Jukka K. Korpela, Nov 19 '12 at 22:19

score 1 · Answer 1 · answered Nov 20 '12 at 09:13

It seems your font link is broken. if I may suggest you, just use google web fonts. There are many fonts that can be used for your website, easy to use and free. Lato's Font also there.

See my the demo here: http://jsfiddle.net/ongisnade/Nx5VR/

the css rules below

@font-face {
  font-family: 'LatoBold';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}

is the result of the extraction from google font link :

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

Hope its help :)

CSS font-face not working in Firefox

1 Answers1

Linked