@font-face

< css‎ | atrules
Jump to: navigation, search

@font-face

This article is Almost Ready.


W3C Candidate Recommendation

Summary

The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.


The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

Syntax

@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}

Values

<family-name>
Specifies a font-family name that will be used as font face value for font properties.
<uri>
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, 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. If that font is not found, other sources will be tried until one is found.
<urange>
A list of Unicode character ranges, where urange is a comma-separated list of Unicode range values.
<font-variant>
A font-variant value.
<font-stretch>
A valid font-stretch property value.
<weight>
A valid font-weight property value (except for the relative values, bolder and lighter).
<style>
A valid font-style property value.

Examples

View live exampleThe following example uses the Open Sans font to style the paragraph element.

CSS

/* Declare the font using @font-face. */
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans"), /* Prefer a locally installed version of the font. */
       local("OpenSans"),
       /* URL requires a valid path to the respective font file.
          Same origin policy is applicable here.
       */
       url("/path/to/OpenSans.eot?#iefix") format("embedded-opentype"),
       url("/path/to/OpenSans.woff") format("woff"),
       url("/path/to/OpenSans.ttf") format("truetype"),
       url("/path/to/OpenSans.svg#OpenSans") format("svg");
  src: url("/path/to/OpenSans.eot");

  font-weight: normal;
  font-style: normal;
}

/* Use the font in your CSS as follows. */
p {
  font-family: "Open Sans", sans-serif;
}

Notes

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 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??)

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.


Related specifications

Specification Status Related Changes
CSS Fonts Module Level 3 Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 4.0
3.5
5.5
10.0
3.2

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 2.2
7.0
18
15
10
10
Unsupported
3.2


TTF/OTF - TrueType and OpenType Font 2.3
7.0
18.0
15.0
Unsupported
10.0
Unsupported
4.2


WOFF - Web Open Font Format Unsupported
7.0
18.0
15.0
10.0
11.5
Unsupported
5.0


EOT - Embedded OpenType font Unsupported
Unsupported
Unsupported
Unsupported
10.0
Unsupported
Unsupported
Unsupported


Compatibility notes

Browser Version Note
Internet Explorer 5.5 - 9.0 Supports EOT fonts only
Android 2.2 - 3.0 Partial support
Safari Mobile 3.2 - 4.1 Supports SVG fonts only

See also

Related articles

Fonts


  • css/atrules/@font-face




















Syntax


  • css/atrules/@font-face












Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: Article