@font-face

  • Revision slug: CSS/@font-face
  • Revision title: @font-face
  • Revision id: 19345
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ CSSRef() }}

{{ fx_minversion_header("3") }}

Summary

@font-face provides an @rule to specify a webfont that need to be download to render the web page as expected by the page author.

Note: @font-face is currently supported on Mac OS X and Windows, but not in Linux.

Syntax

@font-face {
  font-family: <a-remote-font-name>;
  src: {{template.Xref_cssuri()}};
}

 

Values

<a-remote-font-name> 
specify a font name that will be used as font face value for font properties.
<uri> 
URL for the remote font file location.

Examples

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("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

Specifications

Browser compatibility

(Sample Compatibility Chart)

Browser Lowest Version
Internet Explorer ?
Firefox 3.1b1
Netscape ?
Opera ?

See also

{{ CSS_Reference:Fonts() }}

{{ languages( { "fr": "fr/CSS/@font-face" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ fx_minversion_header("3") }}</p>
<h3 name="Summary">Summary</h3>
<p><strong>@font-face</strong> provides an @rule to specify a webfont that need to be download to render the web page as expected by the page author.</p>
<div class="note"><strong>Note:</strong> <code>@font-face</code> is currently supported on Mac OS X and Windows, but not in Linux.</div>
<h3 name="Syntax">Syntax</h3>
<pre style="">@font-face {
  font-family: &lt;a-remote-font-name&gt;;
  src: {{template.Xref_cssuri()}};
}
</pre>
<p> </p><h3 name="Values">Values</h3>
<dl><dt>&lt;a-remote-font-name&gt; </dt><dd> specify a font name that will be used as font face value for font properties. </dd><dt>&lt;uri&gt; </dt><dd> URL for the remote font file location. </dd></dl>
<h3 name="Examples">Examples</h3>
<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">View live sample</a></p>
<pre>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Web Font Sample&lt;/title&gt;
  &lt;style type="text/css" media="screen, print"&gt;
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  This is Bitstream Vera Serif Bold.
&lt;/body&gt;
&lt;/html&gt;
</pre><h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions">CSS 2 fonts</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-webfonts/#font-descriptions">CSS 3 webfonts</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<p>(Sample Compatibility Chart)</p>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>?</td> </tr> <tr> <td>Firefox</td> <td>3.1b1</td> </tr> <tr> <td>Netscape</td> <td>?</td> </tr> <tr> <td>Opera</td> <td>?</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Fonts() }}</p>
<p>{{ languages( { "fr": "fr/CSS/@font-face" } ) }}</p>
Revert to this revision