How does this CSS font family correctly display "Economica"?

Question

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

 font-family: 'Economica', sans-serif 

I was wondering how this works - even in Internet Explorer, in IE7 view mode, it still displays pending. I specifically adhered to web-safe fonts, such as Georgia, Verdana and others, for the body, and I had the impression that to achieve something like this and to ensure cross-platform compatibility, you need to use @font-face .

Obviously, I'm wrong, can someone explain and maybe point out some good resources in web printing that could clarify further?

Please note that I do not have an Economica computer installed on my computer (Windows 7).

Answer 1

Economica is provided by Google Web Fonts ( link to sample font ).

It is loaded through this <link> , which you can find in the page header:

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

And then implemented by browsers that support the CSS @font-face rule so that they can display it on the page. You can learn more about @font-face in the CSS3 specification .

Google Web Fonts uses this rule along with the appropriate format to tell the browser to embed the font. Browsers then download the font and try to display it if it is in a format that they understand, otherwise they just go back to what comes next on the stack (in this case, the common sans-serif family). That’s all there really is.

The font format that ultimately loads depends on the browser: for modern browsers, you need to download the WOFF format , while older browsers such as IE7 get a different format called EOT (supported with IE4!) In order to embed the font. Previous versions of other browsers may display other formats such as TTF, OTF, and even SVG. You can learn more about the different formats and their use in articles about bulletproof @font-face , like this one .

Answer 2

I had a similar problem with a different font. I used this site here and followed the instructions. It turns out that Font Jazz converts all types of fonts into a web safe. It is quite easy to use; just two js files.

Hope this helps!