CODEWITHSUNDEEP
cssfirefoxfont-face
user979331
user979331

Reputation: 11841

CSS font-face not working in Firefox

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>

Upvotes: 3

Views: 3743

Answers (1)

Fredy
Fredy

Reputation: 2910

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 :)

Upvotes: 1

Related Questions