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>
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
is the result of the extraction from google font link :
Hope its help :)