@font-face with embedded font does not work

Question

I have website: http://kuvaklubi.fi where I'm trying to use font "Century Gothic".

This font is not present on my computer in "Installed fonts", and I'd like to embed this font in css via @font-face.

I have generated some font files and css at http://www.fontsquirrel.com/ however I'm still having problems. I can't see "Century Gothic" font in IE9, FF4 browsers.

CSS:

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothic-webfont.eot');
    src: url('gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothic-webfont.woff') format('woff'),
         url('gothic-webfont.ttf') format('truetype'),
         url('gothic-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;    
}

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothicbi-webfont.eot');
    src: url('gothicbi-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothicbi-webfont.woff') format('woff'),
         url('gothicbi-webfont.ttf') format('truetype'),
         url('gothicbi-webfont.svg#CenturyGothicBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothici-webfont.eot');
    src: url('gothici-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothici-webfont.woff') format('woff'),
         url('gothici-webfont.ttf') format('truetype'),
         url('gothici-webfont.svg#CenturyGothicItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('gothicb-webfont.eot');
    src: url('gothicb-webfont.eot?#iefix') format('embedded-opentype'),
         url('gothicb-webfont.woff') format('woff'),
         url('gothicb-webfont.ttf') format('truetype'),
         url('gothicb-webfont.svg#CenturyGothicBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: "Century Gothic", CenturyGothicRegular, Verdana, Tahoma, Helvetica, sans-serif;
...
}

I'm using all combinations of normal/bold/italic fonts on the site.

Can anybody help me see what is happening, why it's happening, and how to fix this?

Thanks.

Answer 1

Your font-family name for the fonts you've uploaded has been titled "CenturyGothicRegular", so you need to refer to this in quotes in the same way you have with Century Gothic proper:

body {
    font-family: "Century Gothic", "CenturyGothicRegular", Verdana, Tahoma, Helvetica, sans-serif;
...
}

You also need to make sure the font files are in the same location as your CSS file, or change the relative URL for the file names.