The Essential Guide to @font-face. Fonts on the Web The days of being limited to a handful of fonts on the web are very close to being a thing of the past.
The problem is no longer a lack of viable solutions, but rather, an abundance of them. Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography. There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use. Further, even the most popular browsers support each of these technologies in widely varying degrees.
However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs. Licensing and Free Fonts The Basic Syntax. Create Your Own @font-face Kits. @font-face - MDC. SummaryEdit The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages.
By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule. SyntaxEdit Descriptors font-family Specifies a name that will be used as the font face value for font properties. src Specifies the resource containing the font data. Font-variant A font-variant value. font-stretch A font-stretch value. font-weight A font-weight value. font-style A font-style value. unicode-range The range of Unicode code points to be used from the font.
Formal syntax How to read CSS syntax. ExamplesEdit This example simply specifies a downloadable font to use, applying it to the entire body of the document: View the live example NotesEdit SpecificationsEdit Browser compatibilityEdit Notes See alsoEdit. @font-face: The Potential of Web Typography. @font-face — what it is exactly?
B @font-face is a CSS rule implemented in Firefox's latest 3.5 browser release. It allows web designers to reference fonts not installed on end user machines. (NOTE: John Daggett has written a lovely primer article on @font-face. It serves as a fine reference into the nitty gritty of @font-face implementation and usage.) Fine typography has always been one of the stumbling points of web design.