@font-face rule
[This documentation is preliminary and is subject to change.]
Sets a font to embed in the HTML document.
Syntax
@font-face { Font-Description }
Parameters
- Font-Description
-
String that specifies one or more of the following descriptors:
Value Meaning - font-family:fontFamilyName
A valid font-family property value.
- font-weight:fontWeight
A valid font-weight property value (except for the relative values,
bolderandlighter).- font-style:fontStyleName
A valid font-style property value.
- font-stretch:fontStretchValue
A valid font-stretch property value.
- src:url(sURL) format(fontFormat) local(fontName)
The location of a font file to use (either an external reference with an optional hint or a local reference).
To specify an external reference, use url(sURL), where sURL is an absolute or relative URL.
To specify specific font formats (only for externally referenced font files), use a format hint (format(fontFormat)) where fontFormat is a comma-separated list of format strings that denote supported font formats. Possible fontFormat values are
"woff","truetype","opentype", and"embedded-opentype". The format hint is optional.To specify a local reference, use local(sFontName), where sFontName is the name of the locally-installed font to use.
- unicode-range:urange
A list of Unicode character ranges, where urange is a comma-separated list of Unicode range values.
Remarks
The rule has no default value.
This feature enables you to use specific fonts that might not be available on your local system.
In addition to legacy Embedded OpenType (EOT) format files, the Web Open Font Format (WOFF) and installable (no embedding permission bits set) raw TrueType.
The unicode-range descriptor defines the range of Unicode characters that are supported by a given font. The values of urange are expressed by hexadecimal numbers prefixed by "U+", that correspond> to Unicode character code points. The unicode-range descriptor serves as a hint for whether to download a font resource. Unicode range values are written by using hexadecimal values and are case insensitive. Each is prefixed by "U+" and multiple, discontinuous ranges are separated by commas. Whitespace before or after commas is ignored. Valid character code values vary between 0 and 10FFFF inclusive. A single range has three basic forms:
-
A single code point (for instance,
U+416) -
An interval value range (for instance,
U+400-4ff) -
A range where trailing ‘
?’ characters imply ‘any digit value’ (for instance,U+4??)
Examples
The following example embeds a font in an HTML document by pointing to the font source, which is located at another site.
<html>
<head>
<style type="text/css">
@font-face {
font-family:comic;
src:url(http://valid_url/some_font_file.eot);
}
</style>
</head>
<body>
<p style="font-family: comic; font-size: 18pt">This paragraph uses the font-face
rule defined in the above style element. The rule embeds an OpenType file for the
Comic Sans font. </p>
</body>
</html>
Build date: 3/14/2012
Here's the code again
@font-face
{
font-family : "myOpenFont";
src : url(../WebFonts/myFont.eot);
}
p
{
font-family : myOpenFont;
}
then implement the css and it will show your non-standard font style for applied pragaraphs.
- 7/29/2011
- Ravi G Pandey
cant find a valid way to make this CSS rule works on IE 6,7,8 using valid EOT fonts, anyone?
- 12/18/2009
- Alkamir
