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 stackoverflow.com/questions/2856502/… — Jules
– Jules, Commented Nov 19, 2012 at 22:15
The font files are not found, e.g. 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
– Jukka K. Korpela, Commented Nov 19, 2012 at 22:19

Fredy · Accepted Answer · 2012-11-20 09:13:27Z

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

Collectives™ on Stack Overflow

CSS font-face not working in Firefox

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related