How to use fonts using CSS3 with fontface?

The CSS3 @font-face Rule

Before CSS3, web designers had to use fonts that were already installed on the user’s computer.

With CSS3, web designers can use whatever font he/she likes.

When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your “own” fonts are defined in the CSS3 @font-face rule.

Browser Support

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.

Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).

Chrome, Safari and Opera also support SVG fonts/shapes.

Internet Explorer also supports EOT (Embedded OpenType) fonts.

Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

Using The Font You Want

In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.