In @font-face CSS rule, can we have a separate 'src' declaration for 'local' definition?

Question

Here's an example @font-face CSS rule:

@font-face {
  font-family: 'DroidSerifBoldItalic';
  font-weight: normal;
  font-style: normal;
  src: url('DroidSerif-BoldItalic-webfont.eot');
  src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),
       url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
       url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}

Don't you think, the following @font-face CSS rule is better? (As you can see, the browsers, in this case even IE, can first check if the font is available on the user's computer, before downloading it.)

@font-face {
  font-family: 'DroidSerifBoldItalic';
  font-weight: normal;
  font-style: normal;
  src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic');
  src: url('DroidSerif-BoldItalic-webfont.eot');
  src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
       url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}

Are there any gotchas here? If not, why isn't everyone using the latter?

Answer 1

From what i know about @font-face, the main fear behind using local is that the font will not be named the same on someone's desktop. You're ceding control there, and if you're wrong it'll fail. You do pose an interesting question though, and i'm not saying you're wrong. You can read more about that here and here.

---

ADDENDUM

Normally, it’s used as a mask to prevent unwanted http requests in IE.

The order matters because IE (at least until IE8) doesn't support the local descriptor, and placing the local descriptor right after the EOT font format prevents the older versions of Internet Explorer from downloading the other font formats (in the src declaration) as they aren't supported, and won't be used anyway.

---

What @BoltClock commented is true. And that's the reason why we use two local definitions -- local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),. The first is the normal name of the font (which is recognized by all browsers except Safari), and the latter is the PostScript name of the font which is required by Safari (at least on Mac / OS X systems).

To avoid issues like two different fonts (mostly on two different OSs) having the same name, some simply use local('☺').