Firefox defaulting to standard font - Help needed

Im using Zen Cart 1.3.8 with a heavily modified 'Darkness' template.

My website views fine in IE8 however (windows) Firefox dislikes my font setup in the CSS and defaults to it's inbuilt configured font.

If you view the source code you can see this entry before the main text:

In my CSS I have:
BODY {
/* font-family: verdana, arial, helvetica, sans-serif, avant garde; */
font-family: Century Gothic, verdana, arial, helvetica, sans-serif; avant garde;

code section
CODE {
font-family: arial, verdana, helvetica, sans-serif, avant garde;
/* font-family: avant garde; */

As im sure you can tell by now I do not really understand the CSS font code do's and dont's. Anyone know what I should have done in my CSS for firefox to like my Century Gothic Font?

Website: http://www.blackcarat.co.uk

Any help much appreciated :D

For starters, it looks like you are writing up your product descriptions in MS Word, then using CTRL+C and CTRL+V to get the text (which is now formatted) into the product description field.

This will just create headaches and problems.

Font usage is limited to what a browser is capable of interpreting, and older browsers read fewer fonts.

Text in product descriptions should be basic HTML formatted and you can apply DIVS and allocate style ID's and CLASSES to these divs.

You then create declarations in a stylesheet that will apply these IDv and / or CLASS settings to the page.

Unfortunately, this is not a forum for HTML and CSS lessons, but if you go to https://www.w3schools.com you will see many good tutorials on these subjects.

I fixed the code on the homepage.

I fixed the code in the CSS sheet so all browsers are now picking up the right font and size.

The text still looks grainy and horrible in opera / safari / firefox.

Im thinking it may be to do with the font-size: 70% command.

Hmm

Yeah, that's pretty small, especially on larger screens set to high resolutions. The font quality improves when I use the browser to bump it up one step in size, so maybe change 70% to 85% or so and see how you like it.

Also, you've specified Century Gothic as the first font choice. That is a very thin-stroke font, so it looks a bit unclear at small sizes. Lucida Sans, your second choice, is much clearer on screen at small sizes, so maybe just delete Century Gothic from the list of fonts.

One final note: you've specified lucida sans, without quotes or capitals. Some browsers won't read that correctly. Best to use "Lucida Sans".

Rob