CSS3 Web fonts are used to allows the fonts in CSS, which are not installed on local system. 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.
CSS3 Web Fonts-Format
1 TrueType Fonts (TTF)
This format 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)
This format is used for scalable computer fonts and developed by Microsoft
3 The Web Open Font Format (WOFF)
This format is used for develop web page and developed in the year of 2009. Now it is using by W3C recommendation.
4 SVG Fonts/Shapes
This format is used to allow SVG fonts within SVG documentation. We can also apply CSS to SVG with font face property.
5 Embedded OpenType Fonts (EOT)
This format is used to develop the web pages and it has embedded in webpages so no need to allow 3rd party fonts
@font-face rule
CSS3 @font-face rule define a name for the font (e.g. myFirstFont), and then point to the font file.
<style>@font-face {
font-family: myFirstFont;
src: url("sansation_light.woff");
}
div {
font-family: myFirstFont;
}
Using bold text:
@font-face {
font-family: myFirstFont;
src: url("sansation_bold.woff");
font-weight: bold;
}
Fonts Descriptors
| 1 | font-family This descriptor is used to defines the name of font |
| 2 | src This descriptor is used to defines the URL |
| 3 | font-stretch This descriptor is used to find, how font should be stretched |
| 4 | font-style This descriptor is used to defines the fonts style |
| 5 | font-weight This descriptor is used to defines the font weight(boldness) |