Log in

View Full Version : @font-face does not work in firefox



James Church
05-24-2011, 11:26 AM
Hi

I'm having trouble with @font-face in firefox

the code I use is below. It seems to work on all other browsers

@font-face {
font-family: "Berkeley_Book";
src: url("../fonts/lte50598-webfont.eot");
src: local(''), url("../fonts/lte50598-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

Does anyone know how to get it to work?!

Thanks

James Church
jchurchdesigns.co.uk

monique
05-25-2011, 10:07 AM
I always use:


@font-face {
font-family : 'yourfont';
src : url('fonts/yourfont.eot'); /* IE9 Compat Modes */
src : url('fonts/yourfont.eot?') format('eot'), /* IE6-IE8 */
url('fonts/yourfont.woff') format('woff'), /* Modern Browsers */
url('fonts/yourfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/yourfont.svg#svgyourfont') format('svg'); /* Legacy iOS */
font-weight : normal;
font-style : normal;
}


and then for example:



h1 {
font-family : yourfont, sans-serif;
}


This should work in all modern browsers.

You can find a font generator at http://www.fontsquirrel.com/fontface/generator.

Good luck!