Font Face :(CSS Tutorials:part-6)

Written by Taj12

Now it is the appropriate time to describe about various CSS properties because you already know about CSS and strategy of using CSS.

Font manipulation is an important area for CSS. With the font manipulation you can get stylish and crazy font, and that increases the beauty of your web page.

Font face has some properties:

  • Font-family
  • Font-style
  • Font-weight
  • Font-variant
  • Font-size


The font-family property is the subject of typeface. Every operating system has its own font family. You also can install or import font manually. Mind it that the different computer operating system contain different font, on the other hand different browser contain font. So you need to use a/some common font. This common font is called web safe fonts.  Serif and Sans-serif are two web safe fonts. You also can use custom font. Declaring format of font-family:

font-family: generic-family, name-of-family

Where the “Times New Roman” is the generic font and sans-serif is the font family name.

Available font-family:

  • serif
  • sans-serif
  • cursive


You can style used font. The font-style property mainly is used for italic style. The use of oblique is vary rare and normal is the default value of font-family. The font-style has three properties:

  • normal
  • italic
  • oblique


The font-weight property specifies the pixel weight of font. The value of font-weight:

  • normal
  • bold
  • bolder
  • lighter

It also can be specified by pixel. Pixel range is 100 to 900.

Normal is the default value, and 400px indicates normal and 700px indicate bold.



The font-variant property is used for just getting the effect of small-caps. Small caps gives a nice effect on letter to display as a bit small than real size of letter.



The font-size property is used for controlling the size of font. Two kinds of strategy to maintain font size:

  • absolute
  • relative

Absolute size:

Value of absolute font-size:

  • xx-large
  • x-large
  • large
  • medium
  • small
  • x-small
  • xx-small

This absolute value is used by building tag of HTML like <h1>…..<h6>. <h1> uses xx-large, <h2> uses x-large and so on.

Relative value:

  • pixel (px)
  • percentage (%)
  • em

In font-size, pixel gives the length of font in pixel unit and percentage gives in % unit and em gives in em unit. The em relies on the parent size means if a div contains 10px and also contains a div and the second div uses a font-size 2em then the second div gets total 20px of font. It is very popular to use em as unit of font size because the browser viewable area is changeable. So it is safe to use em due to get adjustment of font.


Short hand property:

You also can use short hand property where all properties of font are applied in one declaration.


Example of font face:


About the author


Leave a Comment