Google News
logo
CSS3 Web Fonts
Web fonts allow Web designers to use fonts that are not installed on the user's computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Property 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 a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata.
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 fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Web Fonts Example :
<html>
   <head>
   <title>Web Fonts</title>
<style type="text/css">
@font-face {
font-family: 'GlacialIndifference-Regular';
src:  url('../fonts/GlacialIndifference-Regular/GlacialIndifference-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
 
.web_fonts{
 font-family: 'GlacialIndifference-Regular';
font-size:18px;
}
</Style>
</head>

<body>

<div class="web_fonts"><strong>
Web Fonts :</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
      
<p>
<strong>Normal Text :</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>

</body>
</html>
Output :
Web Fonts : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Normal Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.