English 中文(简体)
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

Selected Reading

CSS3 - Web font
  • 时间：2024-11-03

CSS3 - Web Fonts

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 outpne 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 −

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         span {
            font-family: myFirstFont;
         }
      </Style>
   </head>
   
   <body>
      <span>This is the example of font face with CSS3.</span>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>
   </body>
</html>

It will produce the following result −