title: @font-face with embedded font does not work
body: <p>I have website: <a href="http://kuvaklubi.fi" rel="nofollow">http://kuvaklubi.fi</a> where I'm trying to use font <code>"Century Gothic"</code>. </p>
  
  <p>This font is not present on my computer in <code>"Installed fonts"</code>, and I'd like to embed this font in css via <code>@font-face</code>.</p>
  
  <p>I have generated some font files and css at <a href="http://www.fontsquirrel.com/" rel="nofollow">http://www.fontsquirrel.com/</a>
  however I'm still having problems. I can't see <code>"Century Gothic"</code> font in <em>IE9, FF4 browsers</em>.</p>
  
  <p>CSS:</p>
  
  <pre><code>@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;
  ...
  }
  </code></pre>
  
  <p>I'm using all combinations of <code>normal/bold/italic</code> fonts on the site.</p>
  
  <p>Can anybody help me see what is happening, why it's happening, and how to fix this?</p>
  
  <p>Thanks.</p>