CSS3 Web Fonts

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-face Rule

Font files need to be stored on your web server so that your 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 versions do not support the @font-face rule.

Example

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 another URL.

<!DOCTYPE html>
<html>
<head>
    <style> 
        @font-face { 
            font-family: Pacifico; 
            src: url('Pacifico.ttf'),
            url('Pacifico.eot'); 
        }

        #div1 { 
            font-family: Pacifico; 
            font-size:3em;
            background-color:white;
            padding:10px 15px;
        }
    </style>
</head>
<body>
    <div id="div1">
        With CSS3, you can now incorporate many different web fonts into your web projects.
    </div>
</body>
</html>

Font Descriptors

There are various font descriptors that can be defined inside the @font-face rule.

Descriptor	Value	Description
`font-family`	`name`	A required name for the font.
`src`	`URL`	A required value that defines the URL of the font file.
`font-stretch`	`normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded`	Optional values that define how the font should be stretched. The default value is `normal`.
`font-style`	`normalitalicoblique`	Optional values that define how the font should be styled. The default is `normal`.
`font-weight`	`normalbold100200300400500600700800900`	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.