Font Squirrel Generated font not loading in Internet Explorer

Question

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?

Off topic: I laughed at "Fong Squirrel". – Bram Vanroy Nov 12 '13 at 16:40 — Bram Vanroy, Nov 12 '13 at 16:40
Off topic: it's better than "thong squirrel" :) – Justin Meyers Nov 12 '13 at 17:04 — Justin Meyers, Nov 12 '13 at 17:04

score 1 · Answer 1 · answered Nov 12 '13 at 16:34

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.

I did capture the page load in IE developer tools which is how I knew they were being loaded. I'll try downloading the fonts again in the event they're corrupt. — Justin Meyers, Nov 12 '13 at 17:03
Downloaded Verb from a different site selling the font. Downloaded the web version and desktop. Converted or just using the web font, still doesn't render in IE. — Justin Meyers, Nov 12 '13 at 17:30

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

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

edited May 23 '17 at 12:12

Community

1
1

answered Nov 12 '13 at 16:37

mario595

3,671
7
34
57

score 0 · Answer 3 · answered Nov 12 '13 at 19:47

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.

Font Squirrel Generated font not loading in Internet Explorer

3 Answers3