@font-face
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.*
-
**\
- *A list of Unicode character ranges, where*urange*is a comma-separated list of Unicode range values.*
-
**\
- *A [**font-variant**](/css/properties/font-variant) value.*
-
**\
- *A valid [**font-stretch**](/css/properties/font-stretch) property value.*
-
**\
- *A valid [**font-weight**](/css/properties/font-weight) property value (except for the relative values, `bolder` and `lighter`).*
-
**\
- *A valid [**font-style**](/css/properties/font-style) property value.*
The following example uses the Open Sans font to style the paragraph element.
/* 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
- CSS Fonts Module Level 3
- Working Draft
See also
Related articles
Fonts
@font-face
Syntax
@font-face
