@font-face Rule

Sets a font to embed in the HTML document.

Syntax

HTML@font-face { sFontDescription }
ScriptingN/A

Possible Values

sFontDescriptionString that specifies the following values:
font-family:fontFamilyNameAny of the range of values available to the fontFamily attribute.
src:url(sURL)Location of the font file, where sURL is an absolute or relative URL.

Remarks

The rule has no default value.

Dynamic HTML (DHTML) expressions can be used in place of the preceding value(s). As of Windows Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

This feature allows you to use specific fonts that might not be available on your local system. The URL must point to an Embedded OpenType (EOT) file (.eot or .ote format; no other font formats are supported). The file contains compressed font data that is converted to a TrueType font. For more information about the font embedding feature and pointers to a tool for creating .eot files, see About Font Embedding.

The @font-face rule behaves differently from the behavior specified in the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS), Level 3 (CSS3) Working Draft (as of the release of Internet Explorer 8). In particular, Internet Explorer does not support format hint strings.

Example

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>

Standards Information

This rule is defined in CSS 3 World Wide Web link.

Tags :


Community Content

dcaravana
How about other font formats?
Is there any plan to support other font formats like TrueType, OpenType, etc?

Thanks

Alkamir
LOL
trying to post some samples ( wich off course dont work ) the IE8 hangups..

cant find a valid way to make this CSS rule works on IE 6,7,8 using valid EOT fonts, anyone?
Tags :

Page view tracker