The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

@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.


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


A valid font-style property value.


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.


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



The rule has no default value.

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 addition to legacy Embedded OpenType (EOT) format files, Windows Store apps using JavaScript also support 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 Store apps using JavaScript when they decide 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 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>