---
title: '@font-face'
slug: Web/CSS/@font-face
translation_of: Web/CSS/@font-face
---
<p>{{ CSSRef() }}</p>

<h2 id="Resumen">Resumen</h2>

<p><code>@font-face</code> permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes,<code> @font-face </code>elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre>@font-face {
  font-family: &lt;un-nombre-de-fuente-remota&gt;;
  src: &lt;origen&gt; [,&lt;origen&gt;]*;
  [font-weight: &lt;peso&gt;];
  [font-style: &lt;estilo&gt;];
}
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt>&lt;un-nombre-de-fuente-remota&gt; </dt>
 <dd>Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.</dd>
 <dt>&lt;origen&gt; </dt>
 <dd>Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma <code>local("Nombre de Fuente")</code>.</dd>
 <dt>&lt;peso&gt; </dt>
 <dd>Un valor de <a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">peso/grosor de fuente</a>.</dd>
 <dt>&lt;estilo&gt; </dt>
 <dd>Un valor de <a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">estilo de fuente</a>.</dd>
</dl>

<p>Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis <code>local()</code>. Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.</p>

<h2 id="Formatos_de_fuentes_soportados">Formatos de fuentes soportados</h2>

<ul>
 <li>Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType.</li>
 <li>Gecko 1.9.2 (Firefox 3.6) agrega soporte para <a href="/en/WOFF" title="en/About WOFF">WOFF</a>.</li>
</ul>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.</p>

<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">Muestra en vivo</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("https://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>

<p>En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:</p>

<pre class="deki-transform">@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
</pre>

<h2 id="Notas">Notas</h2>

<ul>
 <li><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Gecko</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">las fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">web están</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sujetas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a la restricción del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="atn hps" title="Haz clic para obtener otras posibles traducciones">(los </span><span title="Haz clic para obtener otras posibles traducciones">archivos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">deben estar en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la página</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que los utiliza</span><span title="Haz clic para obtener otras posibles traducciones">)</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a menos que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los </span></span><a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">controles de acceso HTTP</a> <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">sean utilizados para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">relajar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">esta restricción.</span></span></li>
 <li>
  <div class="note"><strong>Nota:</strong> Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado.</div>
 </li>
 <li>Cuando Gecko muestra una página que usa fuentes web, inicialmente muestra el texto que usa la mejor fuente de reserva CSS disponible en la computadora del usuario mientras espera que la fuente web termine de descargarse. Mientras cada fuente web se termina de descargar, Gecko actualiza el texto que utiliza esa fuente. Esto permite al usuario leer más rápidamente el texto en la página.</li>
</ul>

<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>Chrome (WebKit)</td>
   <td><strong>4</strong> (532.5)</td>
   <td>Solo fuentes TrueType y OpenType</td>
  </tr>
  <tr>
   <td></td>
   <td><strong>6</strong> (534.3)</td>
   <td>Web Open Font Format (WOFF) soporte agregado</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>Opera</td>
   <td><strong>10.0</strong></td>
   <td>Solo fuentes TrueType y OpenType</td>
  </tr>
  <tr>
   <td>Safari (WebKit)</td>
   <td><strong>3.1</strong> (525.6)</td>
   <td>Solo fuentes TrueType y OpenType</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th>Navegador</th>
   <th>Versión desde</th>
   <th>Soporte de</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td><strong>4.0</strong></td>
   <td>Solo fuentes OpenType embebidas</td>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td><strong>9.0 Preview 3</strong></td>
   <td>Web Open Font Format (WOFF) soporte agregado</td>
  </tr>
  <tr>
   <td rowspan="2">Firefox (Gecko)</td>
   <td><strong>3.5</strong> (1.9.1)</td>
   <td>Solo fuentes TrueType y OpenType</td>
  </tr>
  <tr>
   <td><strong>3.6</strong> (1.9.2)</td>
   <td>Web Open Font Format (WOFF) soporte agregado</td>
  </tr>
 </tbody>
</table>

<p>Vea también <a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">MSDN Microsoft library @font-face</a>.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">CSS 2 Fonts</a> 1998-05-12 Obsoletas</li>
 <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-resources">CSS 3 Fonts</a> 2009 Borrador de trabajo</li>
 <li><a class="external" href="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html">WOFF file format specification</a> Borrador</li>
</ul>

<h2 id="Vea_también">Vea también</h2>

<ul>
 <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
 <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li>
 <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
 <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
 <li><a class="external" href="http://opentype.info/demo/webfontdemo.html">10 Great Free Fonts for @font-face embedding</a></li>
</ul>