CODEWITHSUNDEEP
htmlcss.htaccessinternet-explorerfonts
dude
dude

Reputation: 6086

Internet Explorer 10 on Windows 7 does not load embedded fonts

Problem details:

I have the problem that Internet Explorer 10 (under Windows 7 - 64 Bit) does not load fonts embedded with @font-face in CSS. Instead it shows "Arial" or a font like that. I have tested this problem on multiple devices:

But for me this problem never occured. But the strange thing is that this problem occurs on a customer PC with Internet Explorer 10 and Windows 7 64 Bit.

The other strange thing is that in the "Network" tab of Internet Explorer shows all resources, but IE will not show any font. Luckily I have a customer PC to debug this issue. I could not figure out what the problem is yet.

What I already did to find a solution:

  1. I have ensured that the path and font-family name is correct. I also ensured that the @font-face command is inside the CSS file I have embedded

  2. I tried to add the doctype from:

    <!DOCTYPE html> to

<!DOCTYPE html SYSTEM "about:legacy-compat">

  3. I updated the meta tags, e.g.:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  4. I also tried to change the order of the font-face url commands

  5. I removed the ' from the name of the font-family, so from:

    font-family: 'My font'; to
font-family: My font;

  6. I also tried to force the correct MIME of the font with a .htaccess file like:

    AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/x-woff               .woff

  7. I also installed the website on another server to be sure this is not a server problem

  8. I ensured that the chekboxes in Internet Explorer 10 under "Internet options" -> "Accessibility" are not checked

Technical things:

I am embedding my CSS with:

<link rel="stylesheet" type="text/css" href="assets/css/base.css">

My @font-face command looks like:

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

// EDIT: I just want to point out that CSS fonts work generally. But unfortunately not in on this site.

Upvotes: 4

Views: 718

Answers (2)

dude
dude

Reputation: 6086

Here is what solved my problem: I found out that the customer has a "whitelist" of hosts. Unfortunately my server wasn't on this list. So the customers proxy blocked all font requests from my server. I don't know the reason for it, but I think the one who configured the proxy thought that a virus or trojan could be downloaded over a font.

Upvotes: 0

Pappu Gupta
Pappu Gupta

Reputation: 11

Getting @font-face working in Internet Explorer may just be spooky enough. as well as you know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. so..my onion to use latest version of browser like- chrome, firefox 3.1, safari 3. Thank you.....

Upvotes: 1

Related Questions