Skip to main content
@font-face rule

Sets a font to embed in the HTML document.


@font-face { Font-Description }



String that specifies one or more of the following descriptors:


A valid font-family property value.


Internet Explorer 9. A valid font-weight property value (except for the relative values, bolder and lighter).


Internet Explorer 9. A valid font-style property value.


Internet Explorer 9. 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. In Internet Explorer 8 and earlier versions, only one URL value is supported.

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", "woff2", "truetype", "opentype", and "embedded-opentype". The format hint is optional starting in Internet Explorer 9. (format hints are not supported in Internet Explorer 8 and earlier versions and are ignored.)

To specify a local reference, use local(sFontName), where sFontName is the name of the locally-installed font to use.


Internet Explorer 9. A list of Unicode character ranges, where urange is a comma-separated list of Unicode range values.



The rule has no default value.

Microsoft Edge supports the Web Open Font Format (WOFF) File Format 2.0 specification which provides an improved compression algorithm from WOFF 1.0. The font format "woff2" is supported.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer on Windows Phone allows cross-origin font loading regardless of access control headers for improved compatibility with existing sites.

This feature enables you to use specific fonts that might not be available on your local system. In Internet Explorer 8 and earlier, the URL must point to an Embedded OpenType (EOT) file (.eot or .ote format). No other font formats are supported. (For more information about the font embedding feature and pointers to a tool for creating .eot files, see About Font Embedding.)

In addition to legacy EOT format files, Internet Explorer 9 also supports 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 Windows Internet Explorer when it decides 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??)
Ranges that do not fit any of these three forms are considered to be parse errors, and the descriptor is omitted.

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

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


The following example embeds a font in an HTML document by pointing to the font source, which is located at another site.

   <style type="text/css">
      @font-face {
   <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>