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


Compatibility

There is no data available for topic "css", feature "@font-face". If you think that there should be data available, consider opening an issue.

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;
}

Usage

Use this at-rule in order to use specific fonts that might not be available on your local system.

Notes

The rule has no default value. 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 the browser 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??)


Related specifications

Specification Status Related Changes
CSS Fonts Module Level 3 Working Draft

See also

Related articles

Fonts

  • @font-face





















Syntax


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