Did you find this useful?
Socialize it today.


CSS3 Web Fonts

Monday, November 26, 2012

browser

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

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 other 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>


With CSS3, you can now incorporate many different web fonts into your web projects.


Font Descriptors

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


DescriptorValueDescription
font-familynameA required name for the font.
srcURLA required value that defines the URL of the font file.
font-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional values that define how the font should be stretched. The default value is normal.
font-stylenormal
italic
oblique
Optional values that define how the font should be styled. The default is normal.
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
Optional values that define the boldness of the font. The default is normal.
unicode-rangeunicode-rangeAn optional value used to define the range of UNICODE characters the font supports.


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3 The Book of CSS3 Sergeys HTML5 CSS3