Prior to CSS3, web developers were basically forced to use fonts that were already installed on visitor's computer. Web developers typically would choose at least two of the more commonly installed
fonts to ensure that their web page would be displayed as intended. Now with CSS3, web developers are able to use any font and be rest assured that the font will be displayed as intended. Some fonts
can be freely downloaded from the Internet with flexible licensing agreements, while others can be purchased. Once you obtain the font files, you simply include the font files on your web server,
and they will be automatically downloaded to the visitor's computer as needed. These "web fonts" are defined with the @font-face rule.
Font files need to be stored on your web server so that you visitors can download the files. Depending on the browser, different file types will be needed. For example, Firefox, Chrome, Safari, and
Opera support True Type fonts (.ttf), and OpenType Fonts (.otf). Internet Explorer 9+ supports Embedded OpenType fonts (.eot). Internet Explorer 8 and
earlier verions do not support the @font-face rule.
Your browser may
support the @font-face rule.
Before you can incorporate a web font in your web application using the @font-face rule, you must first define a name for the font in your style sheet. You must also map it to the font file
that is located on your web server, or other URL.
<div id="div1">With CSS3, you can now incorporate many different web fonts into your web projects.</div>
With CSS3, you can now incorporate many different web fonts into your web projects.
There are various font descriptors that can be defined inside the @font-face rule.
|font-family||name||A required name for the font.|
|src||URL||A required value that defines the URL of the font file.|
|Optional values that define how the font should be stretched. The default value is normal.|
|Optional values that define how the font should be styled. The default is normal.|
|Optional values that define the boldness of the font. The default is normal.|
|unicode-range||unicode-range||An optional value used to define the range of UNICODE characters the font supports.|
Recommended Books & Training Resources