CSS3 - Web fonts


Web fonts are used to allows the fonts in CSS, which are not installed on local system.

Different web fonts formats

Fonts Description
TrueType Fonts (TTF) TrueType is an outline font standard developed by Apple and Microsoft in the late 1980s, It became most common fonts for both windows and MAC operating systems
OpenType Fonts (OTF) OpenType is a format for scalable computer fonts and developed by Microsoft
The Web Open Font Format (WOFF) WOFF is used for develop web page and developed in the year of 2009. Now it is using by W3C recommendation.
SVG Fonts/Shapes SVG allow SVG fonts within SVG documentation. We can also apply CSS to SVG with font face property
Embedded OpenType Fonts (EOT) EOT is used to develop the web pages and it has embedded in webpages so no need to allow 3rd party fonts

following code shows the sample code of font face

         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         div {
            font-family: myFirstFont;
      <div>This is the example of font face with CSS3.</div>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>

It will produce the following result −

Fonts description

The following list contained all the fonts description which are placed in the @font-face rule −

Values Description
font-family Used to defines the name of font
src Used to defines the URL
font-stretch Used to find, how font should be stretched
font-style Used to defines the fonts style
font-weight Used to defines the font weight(boldness)