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

Question

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.

Having problems with IE is normal and expected. Inept at best, it's the worst browser on the planet. — Rob, Sep 11 '12 at 14:54

Patrick · Accepted Answer · 2013-01-31T04:36:51.937

2

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:

http://enable-cors.org/

http://www.w3.org/TR/cors/

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

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.

edited Jan 31 '13 at 04:36

answered Sep 11 '12 at 14:15

Patrick

3,490
1
37
64

At the moment they're being referenced by `src:url('../includes/fonts/vitesse-bold.eot');` however I have previously tried the full path name `src:url('http://www.sub-domain.domain.co.uk/includes/fonts/vitesse-bold.eot');` But, after testing that, weirdly, IE is creating both `src:url('http://sub-domain...` and `src:url('http://www.sub-domain...` But the developer tools are able to find the domain name correctly when not using the full path name. – Oliver Tappin Sep 11 '12 at 14:23
On the previous comment, when it creates two of the same font destinations with www. and without, the ones without come back as a 301 result and the ones with www. come back with a 404 result. Hmm.. – Oliver Tappin Sep 11 '12 at 14:24
1

Does the absolute url path work (as long as you also visit the site with/without `www`)? – Patrick Sep 11 '12 at 14:28
Actually, no they don't - it goes to the default error 404 page when you access it through the URL in your browser. I'll edit the post to show the .htaccess for the main site and the .htaccess for the fonts folder. – Oliver Tappin Sep 11 '12 at 14:28
1

I don't know what you mean by "IE is creating both..." if you are using relative referencing, there should be no need for CORS code or for any .htaccess stuff. Is the @font-face code just in a standard .css file that you've referenced in the head of your doc? – Patrick Sep 11 '12 at 14:35
Yep, I'll put that in too, as well as a screen shot of the double fonts. – Oliver Tappin Sep 11 '12 at 14:36
1

try removing `src:url('../includes/fonts/vitesse-bold.eot?#iefix') format('embedded-opentype'),` lines from both, I haven't seen that before, and I've never needed it. No specific `.htaccess` code should be required for this, nor CORS code - remove these and see what happens – Patrick Sep 11 '12 at 14:43
Unfortunately, didn't make a difference. – Oliver Tappin Sep 11 '12 at 14:46
1

If it's just IE that's having the problem, the `.eot` file might be stuffed, try generating a new one: http://www.fontsquirrel.com/fontface/generator – Patrick Sep 11 '12 at 14:51
Already done this, only works for the Flama-Bold.otf as the Vitesse-Bold.eot is licensed (although the company has paid to use this font) - but the new one still has the same problems. – Oliver Tappin Sep 11 '12 at 14:52
1

Any chance I can see this happening live? – Patrick Sep 11 '12 at 14:59
Works in IE9 now, but still nothing in IE7 or 8 – Oliver Tappin Sep 11 '12 at 15:03
1

You are lacking an EOT file for 'Vitesse-Bold' which should come between the `font-family` declaration and `src:local()` – Patrick Sep 11 '12 at 15:25
Doesn't seem to work. I'm happy now that IE9 is working correctly, just confused why IE7 and 8 is not. Anything below IE9 uses EOT files, is there a way to test these? – Oliver Tappin Sep 11 '12 at 15:36
1

got stuck reading about some naming issue IE has with EOT files, but wasn't able to find a way to open one up and have a squiz. Try using the code in my answer, just put a `?` after `.oet`: `src: url('../includes/fonts/vitesse-bold.eot?');` – Patrick Sep 11 '12 at 16:17
1

Well, if you put the .eot font in the same folder as your styles, get rid of all the @font-face code except for the `.oet` reference (remember to get rid of the path), and it still doesn't work, I'd have to say something is wrong with the file. – Patrick Sep 11 '12 at 16:26
1

If you want to link the .eot file, I'd be happy to try it as well. Feel free to delete the comment/link after I grab it so you aren't distributing it – Patrick Sep 11 '12 at 16:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/16558/discussion-between-titanium-and-patrick) - if you think it would be easier. – Oliver Tappin Sep 11 '12 at 16:37
A WELL deserved answer there. Well done and thank you for your help. – Oliver Tappin Sep 11 '12 at 17:40
1

Wow, what an obscure issue. Thanks for the answer - I was running into the same thing. – nselikoff Jan 30 '13 at 21:35

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

1 Answers1

ACTUAL ISSUE

ORIGINAL ANSWER

Linked