This CSS rule allows for the replacement of fonts with other fonts from different formats if the fonts which are being used are not found within the parameters of the browser being used. This means that if a given font is not found, the site will be rendered with the next available font on the list (or re-set to the default of the given generic family, if none are found). Each of these subsequent fonts can be retrieved from a different Open-source format, as long as the format itself is specified in the rule.
@font-face also allows for the definition of composite fonts to a given site, if there is a need for some glyphs from a different alphabet in a font which does not normally carry those glyphs. In this case, the Unicode range must be defined for the character of that usage.
@font-face has apparently lent itself to some formats better than others, and so forced the hand not only of foundries (to either claim royalties for their property, or not), but also made some formats like SVG less appealling.
With the coming of the @font-face attribute, the danger came into focus of various font purveyors, such as foundries (but includes anyone with control of certain fonts, such as software providers) having their intellectual property stolen. This is when the invention of Embedded OpenType (EOT) came around, which is an open-source form available on Internet Explorer, and other open sources, such as Web Open Font Format, which is now available on most major browsers.
Many suggest alternatives to @font-face, which are in some ways thought to be more effective because they do not rely on the rendering to pick the most appropriate font, but rather link directly to it. One of these methods is to link to an image of the less-web-safe font in the place you want this text to be read.
Fonts are imported with @font-face from a variety of open-sources.