How to make @font-face work with IE9 "Medium-high" security settings

Question

I work in a government network where the security settings are managed by IT. We are also restricted to using IE9 on all our machines. I develop web applications used in lesson content (we are a school) for students, so I try to make the pages look as modern as possible so as not to bore the heck out of the students. Our machines don't even have Helvetica and we teach graphic design.

Until recently, I've abbandoned hope with trying to get @font-face working on pages I make for my school. That is ... until I discovered Prezi. If you go to http://prezi.com with IE9 and Internet site security settings set to "medium high," you'll se that the site still magically loads its "PT Sans" font on the page straight from the fonts.googleapis site. When I discovered this, I literally spent an entire 24-hour period trying to reverse engineer their method, couldn't replicate it with my off-site server, then spent the next 24 hours tracking down the front end developers of Prezi to see if they could let me in on their secret (hey, it's the government, we have free time), all to no avail of course.

The glimmer of hope from seeing Prezi figure it out has caused me to become doglike obsessed with this issue. I've tried all the tricks and fixes all around the Internet over the course of a year. I still can't get it to work.

Prezi uses:

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>

to call the font from their index page, which returns this:

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot);
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/jduSEW07_j4sIG_ERxiq4Q.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot);
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/HXiERDIZdwFzjXlbcMq7XPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

And then they just use it like a regular web font using font-family: 'PT Sans'; !!!

I can replicate the whole thing on a local html file because the security settings for intranet pages are lower than regular Internet pages. But I'm not authorized to use the intranet for my applications.

How did Prezi do it! What could they have done to get it to work on their site? Prezi front-end developers have not responded to my Facebook, Twitter, e-mail or voicemail messages. Prezi software is obviously proprietary, but this is a web page on their site, not their software product.

My IT guys are not helpful either, telling me things I already know, like "medium-high" security settings block @font-face, duh (but obviously they don't, because Prezi did it). They certainly have bigger fish to fry. As a pacifier, they pushed Chrome and FF to my cubicle. Most of what they deal with is "my screen is black" or "what's my desktop" type questions.

Because my question is so specific to my environment, architecture and situation, this is really a shot in the dark. I really did spent more than 24 hours reverse engineering Prezi's home page to figure this out to no avail. It was a waste of time.

How could they possibly get around my network's security settings when no other website, not even http://www.google.com/fonts displays fonts on our machines?

Note: I apologize for the chattyness. It's been 1 a.m. and it's been 37 hours.

Answer 1

I think the basic problem is that IE won't let you download from another domain. To get around it you can host the font on your own server. Here's the basic setup:

1. Download your ttf font file (in google fonts you can download by adding the font to your collection and then clicking on the down arrow at the top right of the collection 'Use' sceen)
2. Nip on over to Font Squirrel and use their 'webfont generator' to create the various permutations needed

3. copy the @font-face code from the top of the handy example page that font squirrel creates and put it into your css file. It will look something like this:

   @font-face {
       font-family: 'PTSans';
       src: url('PTSans-regular-webfont.eot');
       src: url('PTSans-regular-webfont.eot?#iefix') format('embedded-opentype'),
            url('PTSans-regular-webfont.woff') format('woff'),
            url('PTSans-regular-webfont.ttf') format('truetype'),
            url('PTSans-regular-webfont.svg#PTSansregular') format('svg');
       font-weight: normal;
       font-style: normal;
   
   }

Upload the lot and you should be set to go.

Note: this will only work for the 'Medium-high' security setting (and lower). If you're stuck with 'High' you're stuck with the windows default fonts.