CODEWITHSUNDEEP
cssinternet-explorercross-browserfont-facewebfonts
Justin Meyers
Justin Meyers

Reputation: 153

Font Squirrel Generated font not loading in Internet Explorer

Here's the JS Fiddle link: http://jsfiddle.net/n6eaG/ All the HTML, CSS and JS is grabbed from an EECMS site. Just removed enough template tags to render the type/fonts I'm having issues with.

I uploaded Font Squirrel generated VerbUltra/VerbLight as fonts. They render in every browser except Internet Explorer.

I tried the fixes explained on this thread: Why is my @font-face broken in ie9 only?

As recommended, I tried using direct whole-address links to the fonts (didn't work); e.g., http://site.com/fonts.ttf whereas before I had ../fonts.ttf

Example:

@font-face {
font-family: "actuall font name";
src:url( "http://localhost//fonts/fontname.TTF ");}

I also tried using the .htaccess script per recommended by Fong Squirrel (didn't work).

Example: 

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


<FilesMatch "\.(eot|otf|woff|ttf)$">
SetEnvIf Origin »
"^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

It was also recommended on one thread to add the following the font.css file (didn't work): 

src: local("☺"), url('wwwtest.ecidg.com/assets/fonts/verbultra-webfont.eot?#iefix')      format('embedded-opentype'), url('wwwtest.ecidg.com/assets/fonts/verbultra-webfont.ttf')     format("truetype");

When viewing what's actually loading via the developers tools in IE, it shows the font as loading fine.

Any thoughts?

Upvotes: 0

Views: 1601

Answers (3)

Justin Meyers
Justin Meyers

Reputation: 153

Fixed. I read somewhere a few days ago that someone solved this issue by running an update on Windows 7. Thought I had ran an update, but to my surprise, VirtualBox/Windows 7 updates every single time I launch it for approximately 30 minutes.

At any rate, fixed.

Upvotes: 0

mario595
mario595

Reputation: 3761

I think you probably need to add the font in .eot format. Take a look at this answer : Css @font-face not working in ie9

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55772

Open your network tab - push F12 to bring up developer tools, then click the Network tab and click "Start Capturing" - to determine if the fonts are being requested and, if so, if they are successfully being downloaded. If they are not successfully being requested, it's because of your @font-face syntax (try this one - http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax). If they are being requested and downloaded, then they're probably corrupt (not likely if they came from font squirrel). If they're not being downloaded, then it's likely you've got a server side issue on your hands which you'll be able to solve by looking at the status code (404, 500, etc) or the network request.

Upvotes: 1

Related Questions