@font-face rule
| 3.5 | ||||
Allows to embed a font into the HTML document.
Note: The @font-face rule is supported in Firefox from version 3.5.
The imported font can be used to render the contents of the document. The font must be a TrueType or an OpenType (.ttf, .otf) font in
Firefox, Opera, Safari and Google Chrome. In Internet Explorer, .eot (Embedded OpenType) and .ote formats are supported. The font can be used within
the document to render some text with the font family name specified in the @font-face rule.
You can convert .ttf (TrueType Font) to .eot with the Microsoft's WEFT application on Windows, and with the ttf2eot utility on Linux. Example 2 shows how you can embed new font(s) into your HTML document in all commonly used browsers.
Because of security reasons, Firefox allows the insertion of fonts only from the same domain as the original document.
In Javascript, the cssRules collection contains the CSS rules of a stylesheet, and the CSSFontFaceRule object represents a @font-face rule.
The cssRules collection does not contain the @font-face rules in Firefox before version 3.5, and it is not supported in Internet Explorer before version 9.
There is no way to access to a @font-face rule in those browsers.
Syntax:
@font-face {
font-family: fontName;
src: uri;
[font-style]
[font-weight]
}
font-family: fontName;
src: uri;
[font-style]
[font-weight]
}
| fontName | - | A string that can be used as a reference to this font as a value of the font-family property in other style rules. |
| uri | - | Specifies the URL of the font. In Firefox, Opera, Safari and Google Chrome, it can be a comma separated list of URLs and font names in the form local ("fontName"), where a fontName specifies the name of a font on the user's computer. For further details, please see Example 2 and the 13 amazing free fonts for your website blog post. |
Example 1:
|
|
|||
@font-face { font-family: "Dottoro font"; src: url("http://dottoro.com/font/dottoro.ttf"); } |
|||
|
|||
|
Did you find this example helpful?
|
Example 2:
|
|
||||
<head> <style> @font-face { font-family: english; font-style: normal; font-weight: normal; src: url(/blog/fonts/ENGLISH0.eot); /* Internet Explorer */ src: local("english"), url(/blog/fonts/english.ttf ); /* Firefox, Opera, Safari and Google Chrome */ } </style> </head> <body> <span style="font-family:english; font-size:24px;">Your custom font</span> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments