title: @font-face import not working in offline website/different host using online fonts via CSS in IE only
body: <p>IE is very strange.  I've had a look at MIME types, added a <code>.htaccess</code> file with</p>
  
  <pre><code>&lt;FilesMatch "\.(ttf|otf|eot|woff)$"&gt;
    &lt;IfModule mod_headers.c&gt;
      Header set Access-Control-Allow-Origin "*"
    &lt;/IfModule&gt;
  &lt;/FilesMatch&gt;
  
  AddType application/vnd.ms-fontobject .eot
  AddType application/octet-stream .otf .ttf
  </code></pre>
  
  <p>And the IE9 developer tools seem to have noticed that is in place but again no change.  The website is currently offline (just viewed on the hard drive) - authough when it's uploaded to a different server it still does not work - with all the Javascript and Style Sheets linked from within the <code>head</code> tag.  All good.</p>
  
  <p>The fonts are not being imported properly at all.</p>
  
  <p>I get an error message within the developer console saying:</p>
  
  <pre><code>CSS3117: @font-face failed cross-origin request. Resource access is restricted.
  vitesse-bold.eot?#iefix
  
  CSS3117: @font-face failed cross-origin request. Resource access is restricted.
  vitesse-bold.woff
  
  CSS3117: @font-face failed cross-origin request. Resource access is restricted.
  vitesse-bold.ttf
  </code></pre>
  
  <p>I've done quite a bit of research on this and I understand document types can get in the way of this.  I am using UTF-8 where the css starts with <code>@charset "UTF-8";</code> and my HTML file also starts with:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  </code></pre>
  
  <p>I was thinking it was to do with the font conversion but surly if that was the case, the font wouldn't work in the first place in IE when it does when you're looking directly at the website from the hosted server.</p>
  
  <p>Any ideas on how to resolve this?</p>
  
  <p>Also in IE 7 and 8, where they only use EOT files, I get a different error:</p>
  
  <pre><code>CSS3111: @font-face encountered unknown error.
  vitesse-bold.eot
  </code></pre>
  
  <p>Fonts directory .htaccess:</p>
  
  <pre><code>&lt;FilesMatch "\.(ttf|otf|eot|woff)$"&gt;
    &lt;IfModule mod_headers.c&gt;
      Header set Access-Control-Allow-Origin "*"
    &lt;/IfModule&gt;
  &lt;/FilesMatch&gt;
  
  AddType application/vnd.ms-fontobject .eot
  AddType application/octet-stream .otf .ttf
  </code></pre>
  
  <p>Main website .htaccess:</p>
  
  <pre><code>&lt;IfModule mod_rewrite.c&gt;
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
  &lt;/IfModule&gt;
  </code></pre>
  
  <p>CSS font import:</p>
  
  <pre><code>@font-face {
      font-family:'Vitesse-Bold';
      src:url('../includes/fonts/vitesse-bold.eot');
      src:url('../includes/fonts/vitesse-bold.eot?#iefix') format('embedded-opentype'),
              url('../includes/fonts/vitesse-bold.woff') format('woff'),
              url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
              url('../includes/fonts/vitesse-bold.svg#vitesse-bold') format('svg');
      font-weight:normal;
      font-style:normal;
  }
  @font-face {
      font-family:'Flama-Bold';
      src:url('../includes/fonts/flama-bold.eot');
      src:url('../includes/fonts/flama-bold.eot?#iefix') format('embedded-opentype'),
              url('../includes/fonts/flama-bold.woff') format('woff'),
              url('../includes/fonts/flama-bold.ttf') format('truetype'),
              url('../includes/fonts/flama-bold.svg#flama-bold') format('svg');
      font-weight:normal;
      font-style:normal;
  }
  </code></pre>
  
  <p>Screenshots:</p>
  
  <p><a href="http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg" rel="nofollow">http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg</a>
  Font import with <code>src:url('../includes/fonts/font.eot');</code></p>
  
  <p><a href="http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg" rel="nofollow">http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg</a>
  Font import with <code>src:url('http://sub-domain.domain.com/includes/fonts/font.eot');</code></p>
  
  <p><a href="http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg" rel="nofollow">http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg</a>
  Font import with <code>src:url('http://www.sub-domain.domain.com/includes/fonts/font.eot');</code></p>
  
  <p>Unsure what was going on with IE creating two fonts with both <code>http://www.</code> and <code>http://</code> but it seems to have stopped working now.</p>