The @font-face at-rule allows you to define custom fonts. It was first defined in the CSS2 specification, but was removed from CSS2.1. Currently, it’s a draft recommendation for CSS3. The at-rule contains one or more property declarations, like those in a regular CSS rule set, which are called font descriptors.

The font descriptors allow you to define fonts, and to influence the browser’s selection of fonts when no matching font is found on the client system. This matching can be performed not only on the font name, but on many other font characteristics as well. As mentioned in previous chapter, in the simplest usage scenario, @font-face allows you to specify a font-family name, and the URI to a source file for the font, which can be downloaded by the user agent if needed. You can then use the font-family name in other font-family declarations where required. The @font-face rule is accompanied by other descriptors to give developers more control over the fonts.

A complete list of font descriptors is presented below (including those specified by CSS2):

A complete list of font descriptors
font-family name the name of the font
src URL the URL(s) where the font is to be found
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded		 font stretching; default value is "normal"
font-style normal
italic
oblique		 font styling; default value is "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900		 font boldness; default value is "normal"
unicode-range unicode-range the range of Unicode characters that font supports; default value is "U+0-10FFFF"

 

 

 

 

 

 

 

 

 

 

NOTE: Properties font-family and src are required.

Example

Example of fully styled fonts in CSS3: 

 

›› go to examples ››