/

HTML / CSS / JavaScript Tutorial

CSS Rule: @font-face

[this page | pdf | back links]

The CSS (CSS3) @font-face rule allows designers to apply their own font. Syntax is as follows:

 

@font-face {

    font-properties

}

 

The font-properties are:

 

Descriptor

Description / Values it can take

font-family

Required. Name of font

src

Required. A valid URL from which the font is downloaded

font-stretch

Optional. Akin to the CSS font-stretch property. Indicates how the font should be stretched. Acceptable values are (default is normal):

-        condensed

-        expanded

-        extra-condensed

-        extra-expanded

-        normal

-        semi-condensed

-        semi-expanded

-        ultra-condensed

-        ultra-expanded

font-style

Optional. Akin to the CSS font-style property. Indicates how the font to be styled. Acceptable values are (default is normal):

-        italic

-        normal

-        oblique

font-weight

Optional. Akin to the CSS font-weight property. Indicates boldness of font. Acceptable values are (default is normal): normal, 100, 200, 300, 400, 500, 600, 700, 800, 900

unicode-range

Optional. Indicates range of Unicode characters that the font supports (default is U+0-10FFFF):

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile