In CSS3 we can use different types of fonts as required at a time of designing something cool.

When you find your specified font then just include that font file to web servers. and that will automatically download when user needs.

Your own fonts can be defined within the CSS3 using @font-face rule.

Different Font Formats

  • TrueType Fonts (TTF)
  • The Web Open Font Format (WOFF)
  • OpenType Fonts (OTF)
  • Embedded OpenType Fonts (EOT)
  • The Web Open Font Format (WOFF 2.0)


Fonts  Preview
Fonts Preview


How To Use Font?

In CSS3 using @font-face you can defined fonts and also name that font, and then point to that font file.

see below code how to use font-face code.


@font-face {
font-family: oswald-normal;
src: url("oswald/Oswald-Regular.ttf"); /* Path of font file */

div {
font-family: oswald-normal;


Using Bold

Using bold font file we can also use bold fonts,


@font-face {
font-family: oswald-bold;
src: url("oswald/Oswald-Bold.ttf"); /* Path of font file */

div {
font-family: oswald-bold;


CSS3 Font Descriptors

Following attributes we can add in @font-face style.

  1. font-family (Required) : Specify name.
  2. src (Required) : Required font file path.
  3. font-stretch (Optional) : How font should be stretch (i.e : normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded ).
  4. font-style (Optional) : Style of font (i.e: normal, italic, oblique).
  5. font-weight (Optional) : Defines boldness of font (i.e: normal,bold,100,200,300,400,500,600,700,800,900).
  6. unicode-range (Optional) : Defines the range of UNICODE characters the font supports.


Full HTML & CSS Code


Hi this is OSWALD NORMAL Fonts.
Hi this is OSWALD BOLD Fonts.

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



  1. The font-face rule has nothing to do with CSS3: even with IE6 was possible to use web fonts.

    For the font weights and styles you don’t need to declare different font-faces rules: actually I don’t recommend this approach, as this would make the css hard to maintain.

    You can link all styles and weights with one or multiple @font-face rules, sharing the same family name:

Leave a Reply

Your email address will not be published. Required fields are marked *