CSS3 - Web Fonts

Different web fonts formats

Sr.No.	Font & Description
1	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.
2	OpenType Fonts (OTF) OpenType is a format for scalable computer fonts and developed by Microsoft
3	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.
4	SVG Fonts/Shapes SVG allow SVG fonts within SVG documentation. We can also apply CSS to SVG with font face property.
5	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 −

Live Demo

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </Style>
   </head>
   
   <body>
      <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>
   </body>
</html>

It will produce the following result −

Fonts description

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

Sr.No.	Value & Description
1	font-family Used to defines the name of font
2	src Used to defines the URL
3	font-stretch Used to find, how font should be stretched
4	font-style Used to defines the fonts style
5	font-weight Used to defines the font weight(boldness)