@font-face
The CSS3 @font-face Rule:Your "own" fonts are defined in the CSS3 @font-face rule. Before CSS3, web designers had to use fonts that were already installed on the user's computer. With CSS3, web designers can use whatever font they likes.
Note:
Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (OpenType Fonts).
Note:
Internet Explorer 9+ supports the new @font-face rule, but it only supports fonts of type .eot (Embedded OpenType).
Syntax:
@font-face
{
font-properties
}
Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of 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. All Browsers Compatable
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
CSS3 Font Descriptors
The following table lists all the font descriptors that can be defined inside the @font-face rule:
Example:
<!DOCTYPE HTML>
<head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, We can declare user defined fonts as per the requirements.
</div>
</body>
Example:
<!DOCTYPE HTML>
<head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
}
@font-face
{
font-family: myFirstFont;
src: url('https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/Sansation_Bold.ttf')
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
</body>