How is this CSS font-family displaying "Economica" properly?

Question

On this page: http://www.anasiamusic.com/bio.html in the body text ("Ana Sia's DJ crate is a ticker...") the font-family property for that <div> is specified as:

font-family: 'Economica', sans-serif

I was wondering how this works - even in Internet Explorer, on IE7 viewing mode, it still displays as anticipated. I had been sticking to web-safe fonts like Georgia, Verdana, and others for body copy especially and I had been under the impression that to accomplish something like this and make it cross-platform compatible, one had to use @font-face.

Obviously I'm mistaken, could someone explain and perhaps point to some good resources on web typography that might elucidate further?

Note that I don't have Economica installed on my computer (Windows 7).

Answer 1

Economica is supplied by Google Web Fonts (link to font specimen).

It's loaded through this <link> tag, which you can find in the page head:

<link href='http://fonts.googleapis.com/css?family=Economica:700' rel='stylesheet' type='text/css'>

And then embedded by browsers that support the @font-face CSS rule, such that they can render it within the page. You can read more about @font-face in the CSS3 spec.

Google Web Fonts makes use of that rule, along with the appropriate format, to tell browsers to embed the font. Browsers then download the font and attempt to render it if it's in a format that they understand, failing which they'll just fall back to whatever comes next in the stack (in this case, the generic family sans-serif). That's all there is to it, really.

The font format that eventually gets downloaded is browser-dependent: modern browsers only need to download the WOFF format, whereas older browsers like IE7 receive a different format called EOT (supported since IE4!) in order to embed the font as well. Previous versions of other browsers may pick up other formats like TTF, OTF and even SVG. You can read more about the various formats and their uses in articles about the bulletproof @font-face syntax, like this one.