CSS3 - Web Fonts

Advertisements

Previous Page
Next Page  

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

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)
Advertisements