home

CSS3 Web Font Face Property

Web font allows web developers to use fonts are not installed on a user computer. This css3 web font property is really useful one when you found your own font which will fit for an application (website) by the time web fonts is the solution. With using this, you can use your own font. There is no property or option in css older version.

@font-face{
src:url(../fonts/RobotoCondensed-Light.ttf);
font-family:light;
}

How Css3 Web Fonts works

you have to create a folder for storing fonts, then insert that font path (url) and font family in class or id. When the user opens the website automatically it will display with your font. Please follow the below example code you will understand everything.

Css3 Web Fonts Demo

Css3 Web Fonts Demo

This is sample paragraph for Css3 Web Fonts Property(Light).

This is sample paragraph for Css3 Web Fonts Property(Regular).

Css3 Web Fonts Browser Support

This will support all major browser like IE-9.0, Mozilla firefox-3.5, 3.6, Google Chrome-4.0, 5.0, Safari-3.1, 5.1, Opera-10.0, 11.1.

Css3 Web Font Code

Its simple example code web-fonts with font family and font url(font path) properties values.

<div class=”web-font”></div>
  Font-Type-Light
  @font-face{
  src:url(../fonts/RobotoCondensed-Light.ttf);
  font-family:light;
  }
Font-Type-Regular
  @font-face{
  src:url(../fonts/RobotoCondensed-Regular.ttf);
  font-family:regular;
  }