CSS3 Web Fonts
In previous versions of CSS3 , web designers had to use fonts already installed on users' computers.
Using CSS3 , the web designer can use any font he /she likes.
When you find the font file you want to use, simply include the font file in the website and it will be downloaded automatically to the users who need it.
The font you have selected is described in the new CSS3 version about the @ font-face rule.
Your "own" font is defined in the CSS3 @ font-face rule.
The numbers in the table indicate the first browser version number that supports this attribute.
Different Font Formats
TrueType Fonts (TTF)
TrueType is a textual style standard created in the late 1980s, by Apple and Microsoft. TrueType is the most widely recognized textual style group for both the Mac OS and Microsoft Windows working systems.
OpenType Fonts (OTF)
OpenType is an arrangement for versatile PC text styles. It was based on TrueType, furthermore, is an enlisted trademark of Microsoft. OpenType text styles are utilized ordinarily today on the major PC platforms.
The Web Open Font Format (WOFF)
WOFF is a text style position for use in pages. It was produced in 2009, and is presently a W3C Recommendation. WOFF is basically OpenType or TrueType with pressure and extra metadata. The objective is to help text style dissemination from a server to a customer over a system with transmission capacity constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType textual style that gives preferable pressure over WOFF 1.0.
SVG textual styles permit SVG to be utilized as glyphs while showing content. The SVG 1.1 detail characterize a textual style module that permits the formation of text styles inside an SVG archive. You can likewise apply CSS to SVG archives, and the @font-face rule can be connected to content in SVG documents.
Embedded OpenType Fonts (EOT)
EOT text styles are a minimized type of OpenType textual styles structured by Microsoft for use as installed textual styles on web pages.
Browser Support for Font Formats
The numbers in the table determines the primary program form that completely underpins the textual style format.
|WOFF2||Not supported||36.0||35.0*||Not supported||26.0|
|SVG||Not supported||4.0||Not supported||3.2||9.0|
|EOT||6.0||Not supported||Not supported||Not supported||Not supported|
Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support WOFF (Web Open Font Format) fonts.
Firefox, Chrome, Safari, and Opera support .ttf (True Type font) and .otf (OpenType) font type).
Chrome, Safari and Opera also support SVG fonts /folding.
Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: The new @ font-face rule is not supported in Internet Explorer 8 and earlier.
Using The Font
In the new @ font-face rule, you must first define the name of the font (such as myFirstFont) and then point to the font file.
|Tip: Please use lowercase font for URLs. Uppercase letters will produce unexpected results in IE.|
To use a font for an HTML element, refer to the name of the font through the font-family attribute (myFirstFont):
textual style family: wefont;
Using Bold Text
You must add another @ font-face rule containing bold text::
The file "Sansation_Bold.ttf" is another font file that contains the bold font of the Sansation font.
Browsers should use this text's font family "myFirstFont" in bold.
This way you can have many of the same font @ font-face rules.