@font-face import not working in offline website/different host using online fonts via CSS in IE only

IE is very strange. I've had a look at MIME types, added a .htaccess file with

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

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 head tag. All good.

The fonts are not being imported properly at all.

I get an error message within the developer console saying:

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

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 @charset "UTF-8"; and my HTML file also starts with:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">

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.

Any ideas on how to resolve this?

Also in IE 7 and 8, where they only use EOT files, I get a different error:

CSS3111: @font-face encountered unknown error.
vitesse-bold.eot

Fonts directory .htaccess:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

Main website .htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

CSS font import:

@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;
}

Screenshots:

http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg Font import with src:url('../includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg Font import with src:url('http://sub-domain.domain.com/includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg Font import with src:url('http://www.sub-domain.domain.com/includes/fonts/font.eot');

Unsure what was going on with IE creating two fonts with both http://www. and http:// but it seems to have stopped working now.

ACTUAL ISSUE

We got the font working in IE9 by fixing the @font-face code, and narrowed the issue down to the EOT file.

The issue here was the fontname and family-name set within the font file itself. For some reason, IE6-8 have issue with these two properties being different (not all the time though, as the custom fonts I am using on my site have different names for each property, and it works just fine in everything).

I got the original OTF file off him, used FontForge to set the "fontname", "family name" and "name for humans" to all be the same, then saved the font as a TTF, and converted it online to EOT format.

Works great now. The things we do to make $#!7 work in IE.

Note: I had previously tried to convert the file to EOT (no edits to the file properties) with no success.

ORIGINAL ANSWER

How are you referencing your font files? Sounds as though you either aren't relatively linking to them, or they are on another domain/host name.

If you have linked to them absolutly, eg: http://www.domain.com/fonts/myfont.eot and you visit the site via http://domain.com, then you will have CORS issues. I had this problem, I thought it was an IE problem, turned out I was simply viewing the website with www on one browser, and without on IE.

If the font files are on another host name or domain, you will need to enable CORS, read more:

Code I use for @font-face:

@font-face { font-family: "Vitesse-Bold"; src: url('../includes/fonts/vitesse-bold.eot'); src: local('(*%$@#@'), url('../includes/fonts/vitesse-bold.woff') format('woff'), url('../includes/fonts/vitesse-bold.ttf') format('truetype'), url('../includes/fonts/vitesse-bold.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: "Flama-Bold"; src:url('../includes/fonts/flama-bold.eot'); src: local('(*%$@#@'), url('../includes/fonts/flama-bold.woff') format('woff'), url('../includes/fonts/flama-bold.ttf') format('truetype'), url('../includes/fonts/flama-bold.svg') format('svg'); font-weight: normal; font-style: normal; }

use like:

font-family: "Vitesse-Bold", Verdana, sans-serif;

note: The use of src: local('(*%$@#@') is not supported by <~4.0 default android browser, and will cause the custom font to not work at all.

ACTUAL ISSUE

ORIGINAL ANSWER

Recommended topics

Hot tags