CSS3 Web Fonts

Here is the breif explanation on how to define custom fonts in CSS3 using the CSS3 @font-face Rule.


Web fonts allow Web designers to use fonts that are not installed on the user's computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. Your "own" fonts are defined within the CSS3 @font-face rule.

Property :

@font-face {font-properties}

The font-descriptor values are given as below:

font-family (name) - Required. Defines the name of the font.
src (URL) - Required. Defines the URL(s) where the font should be downloaded from
font-stretch (normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-expanded/ultra-expanded) - Optional. Defines how the font should be stretched. Default value is "normal"
font-style (normal/italic/oblique) - Optional. Defines how the font should be styled. Default value is "normal"
font-weight (normal/bold/100/200/300/400/500/600/700/800/900) - Optional. Defines the boldness of the font. Default value is "normal"
unicode-range (unicode-range) - Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF"


@font-face { font-family: myFont; src: url(arial.ttf); }


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

Example 1:

@font-face {
font-family: myFont;
src: url(comic.ttf);
<div style='font-family: myFont;'>This example explains about the @font-face rule.</div>

This example explains about the @font-face rule.

Ask Questions

Ask Question