font-face property CSS Reference



Definition and Usage

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

Descriptors

family-name
Specifies a font name that will be used as font face value for font properties.
src
URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name"). You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.
font-variant
A font-variant value.
font-stretch
A font-stretch value.
font-weight
A font weight value.
font-style
A font style value.
unicode-range
The range of unicode code points defined in the font-face rule.

Examples

This example simply specifies a downloadable font to use, applying it to the entire body of the document.View live sample

<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("webfont.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user doesn't have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}

Compatibility

Desktop browsers

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 11.10 5.1
SVG Font Not supported
Unimplemented (see bug 119490)
(Yes) Not supported (Yes) (Yes)
unicode-range Not supported (Yes) 9.0 (Yes) (Yes)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.9.1) NA Not supported 10.0 (Yes)
WOFF NA 5.0 (5.0) NA Not supported 11.0 Not supported
SVG fonts NA Not supported
Unimplemented (see bug 119490)
NA Not supported 10.0 (Yes)
unicode-range NA Not supported NA Not supported NA (Yes)

Relative articles