@font-face

  • Revision slug: CSS/@font-face
  • Revision title: @font-face
  • Revision id: 19354
  • Created:
  • Creator: Prmatt11
  • Is current revision? No
  • Comment 2 words added, 1 words removed

Revision Content

{{ CSSRef() }}

{{ fx_minversion_header("3") }}

Summary

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

Syntax

@font-face {
  font-family: <a-remote-font-name>;
  src: <uri>;
}

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.

Notes

Fonts use HTTP access controls to determine whether or not they may be loaded from other hosts.

Firefox supports TrueType and OpenType fonts.

When rendering a page using downloaded fonts, Firefox first renders using available fonts, then updates the display as downloadable fonts are retrieved.  This allows the content to render quickly and refresh to match the intended look over time.

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 10 alpha

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 web font that needs to be downloaded to render the web page as expected by the page author.</p>
<h3 name="Syntax">Syntax</h3>
<pre style="">@font-face {
  font-family: &lt;a-remote-font-name&gt;;
  src: &lt;uri&gt;;
}
</pre>
<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>Notes</h3>
<p>Fonts use <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access controls</a> to determine whether or not they may be loaded from other hosts.</p>
<p>Firefox supports TrueType and OpenType fonts.</p>
<p>When rendering a page using downloaded fonts, Firefox first renders using available fonts, then updates the display as downloadable fonts are retrieved.  This allows the content to render quickly and refresh to match the intended look over time.</p>
<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/CSS2/fonts.html#font-descriptions" title="http://www.w3.org/TR/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>10 alpha</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