HTML5 + CSS3 Website doing something I can't explain

[gl82uk]

Recently I saw a truly amazing website using all the latest technoligies over at fatmedia dot co dot uk

One fantastic thing this site does is make use of css3 to render some fantastic looking nav bar buttons. It uses the dropshadow indent as well. I wanted to know what font was being used as it was all html and text no images. When I used firebug to inspect the styles being applied firebug clearly showed a line going through the font style being applied via the style sheet but failed to show what style it was infact inheriting.

I tried to recreate these buttons but they didn't seem quite right. I even went as far as copying the html and css to just see it reproduced and to learn from it but I failed at doing this.

Finally as a last attempt i viewed the sourced code and saved it locally. Then I put a base url at the top of the page just after the head bracket and put the site url as its base. Then I loaded the local version and everything looked spot on the site worked the same from my c: with one difference. The font wasn't the same! It was slightly different.

I am so intrigued as to what tricky is being used here to prevent the font being used being identified.

Any ideas people?

[firesnaker]

From the "style.css", it looks like the website is using :
1. HelveticaNeue
2. DobraSlab
3. proxima-nova
4. din-condensed-web

It is also loading font from typekit.net, "proxima-nova" and "din-condensed-web"

Try googling the font name and see if you can match it.

Hope that helps.

[gl82uk]

I know that's what the css says, when I use firebug I get this line

font: bold 1.111em/1.6em 'DobraSlab',arial,sans;

With a line through it to indicate it is not the font style being applied and it is being overridden from elsewhere. Firebug normally shows what is being applied but it doesn't on this site.

I don't get it. Why if you save it locally and reference all the style sheets with the absolute paths does it not load locally the same?

The rest of the imagery and displays 100% accurate locally just not the nav bar. I can't see a logical reason for this but there must be one?

[gl82uk]

Could this be a culprit?

<script src="//use.typekit.net/xvd0ont.js"></script>

It's almost as if there is a last minute bit of rending going on. It is also applied to the white huge text infront of the office animation directy below the nav bar. When saved locally the text isn't quite as bold. I'm curious as to why there is a double //. Possibly it is some type of script that does some rending and generates a css from looking at it and possibly it only accepts requests locally from the site server?

Is this some kind of new protection scheme?