Font face is not working on IE browser

Question

I have applied font face on a jquery popup. It's working on Chrome and Firefox but not working on IE browsers.

Font Face Code in css
----------------------

@font-face {
font-family: "pt-sans";
    src: url("https://www.example.com/font/PTS55F.eot");
    src: local("pt-sans"),
     url("https://www.example.com/font/PTS55F.woff") format("woff"),
     url("https://www.example.com/font/PTS55F.ttf") format("truetype"),
     url("https://www.example.com/font/PTS55F.svg") format("svg"); 
 }

Code added in .htaccess
----------------------

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

By adding above code Font-face is working on page but when I try the same on popup font face doesn't work.

Please help me on this.

Answer 1

Credits to this guy/forum: http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

I experience the same problem with IE11, use the font levenim on my site. Headers correct, everything as it should be. When I use a CDN or subdomain it won't load and when on the same domain it loads perfectly. What's the problem? THE FILENAME. pfff.

I use 'lvnm-webfont' as file basename and is NOT the same as the font name. It MUST be 'levenim' for IE-only when it is on a CDN or subdomain. Grazy right? I think it has something to do with copyrights.

But there is another problem when it is a copyright font it will load but not used when loaded from CDN or subdomain. So I use this trick for IE only to load the font anyway (in HTML page):

NOTICE: Font must exists on domain and subdomain and must be loaded AFTER any other CSS (IE-only)

<!--[if gte IE 7]]>
<style type="text/css">
@font-face {
    font-family: '__siteFont__';
    src: url('fonts/lvnm/lvnm-webfont.eot');
    src: local('☺'), url('fonts/lvnm/lvnm-webfont.woff') format('woff'), 
                     url('fonts/lvnm/lvnm-webfont.ttf') format('truetype'), 
                     url('fonts/lvnm/lvnm-webfont.svg#webfontTVnpYENL') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
<![endif]-->

I can do it more effecient because I can use IF statements in templates and CSS to avoid an extra server lookup (part of my framework). Something like this:

In CSS:

/* #IF !$is_msie */
<load font from CDN>
/* #ENDIF */

In HTML:

<!-- #IF $is_msie -->
<load font from domain>
<!-- #ENDIF -->

You can also choose to load the fonts from your domain but you can't do this when the css file is served from a subdomain, you've got the same issues with IE. In that case you need to add a style tag in your HTML (template) like example above but without the Conditional Comments of IE.

Hopes it helps.

Answer 2

This is an old question, however I feel it would be best if I answered it now as I came across the same problem with IE even after all possible solutions were applied. I am assuming the website in question here was hosted on a local server, which IS the problem with IE essentially. It took me a while to realize, but I noticed that my live website had working fonts, whilst my local version didn't. By default IE usually has a setting applied to show compatibility view mode in the browser for locally hosted websites (Intranet), which means that some styling may not work correctly as intended and also imported fonts often will not work.

To disable this setting, go to the IE menu by clicking the cog/gear icon in the top-right > Compatibility View Settings and then un-check "Display intranet sites in Compatibility View. This should solve the problem for future visitors here, I am using IE11 and this still occurs, so it is likely to be the same for years to come, since IE only just got unlimited tabs now too.

Answer 3

That´s the old IE bug ;)

Bulletproof @font-face syntax:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

What? I don't get it.

The hack trick that makes this work is the ? following the EOT filename. Seriously.

Browser compatibility

Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11

---

EDIT: Seems like you are in trouble man, I was digging on similar questions, and seems like IE cannot use an @fontface font hosted outside the site's domain (If the page is at http://www.mysite.com/page - font must also be in the http://www.mysite.com) for one reason or another. Put the EOT file on your domain and try again maybe.

This similar questions also would help:

• @font-face EOT not loading over HTTPS
• IE9 blocks download of cross-origin web font
• Make Adobe fonts work with CSS3 @font-face in IE9

They few possible solutions to the problem. Good luck!

Answer 4

Try this Font Face Code in css:

@font-face{
font-family:'pt-sans';
src:url('https://www.mysite.com/font/PTS55F.eot'); // IE9 Compat Modes
src:url('https://www.mysite.com/font/PTS55F.eot?#iefix') format('embedded-opentype'), // IE6-IE8
url('https://www.mysite.com/font/PTS55F.woff') format('woff'), // Modern Browsers
url('https://www.mysite.com/font/PTS55F.ttf') format('truetype'), // Safari, Android, iOS
url('https://www.mysite.com/font/PTS55F.svg#pt-sans') format('svg');  // Legacy iOS
font-weight:normal;
font-style:normal
}

or you can upload your font on : http://www.fontsquirrel.com/fontface/generator and get font-face kit and css also this will work on all browsers.

Answer 5

This is hte code i use. But i never needed any htaccess code. Never had any problem with it.

@font-face 
{    
    font-family: 'Robotothin';

    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#Robotothin') format('svg');

}