@font-face source?

HTML & CSS
1

I have read several @font threads in the forum googled around for this piece of info, but I am not having any luck. Maybe it’s just not that important to actual functionality , but i want to know:

[PRE]
@font-face {
font-family: “AndaleMono”;
src: url( “AndaleMono.eot” );
src: local( “Andale Mono”),
url( “AndaleMono.woff” ) format( “woff” ),
url( “AndaleMono.ttf” ) format( “truetype” ),
url( “AndaleMono.svg#AndaleMono” ) format( “svg” );
}
[/PRE]

what is the function of “src: local( “…”)”?
If src:local points to an installed font in the USER’s system… why would it need to even be listed…isnt it already part of the normal CSS font stack?

Also:
In the above code, from what I have read, the first src:url(…) serves an otf font to IE browsers, the URLs in the second scr:s are ignored by IE serve font to all other browsers.
But why the different formats??
Once you have served a non IE browser a TTFont what is the use of also providing it with an SVG?

thanks again for sharing your wisdom
==:)

2

No. EOT is a proprietary Microsoft format.

3

Um Ok. I get that part. I am just curious if other browsers (other than IE) can understand:src: url( “AndaleMono.eot” );
thus causing browsers other than IE to make multiple server requests/downloads for fonts they cant use…

4

Some don’t support all types of fonts, aka only IE supports .EOT files, while others such as FF support a different type

5

Thanks Paul. I read those articles. What they dont answer for me is WHY?

We server the EOT fonts first for IE, So IE doesnt make the server calls for the other unusable versions, but then doesn’t that mean that browsers like Firefox, for example, are calling EOT font versions as well? In another words are we making allowances for IE performance while forgoing the effiency of other user agents?

6

to look first for the font on your visitor’s own computer and if it is there to not bother downloading any of the following versions.

woff is actually the standard format for embedded fonts but few browsers support it yet.
ttf is supported by most browsers apart from IE, iPhone, and iPad
svg is necessary to support iPhone and iPad

7

The last reference is the one closest to the content and so takes priority. By placing the EOT reference first it ensures that browsers that understand the second command will ignore the first one.

IE doesn’t understand the local reference in the second command and so is theonly browser that has to read past that command back to the first one that references the EOT file.

CSS files are always processed from the bottom up because the last reference in the file where there are overlaps will be the one to be used.

8

I think Paul Irish’s article explains all these points in some detail.

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/