@font-face
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
Resumen
-------

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

Sintaxis
--------
```

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

### Valores

<un-nombre-de-fuente-remota>

Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.

<origen>

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 `local("Nombre de Fuente")`.

<peso>

Un valor de peso/grosor de fuente.

<estilo>

Un valor de estilo de fuente.

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

Formatos de fuentes soportados
------------------------------

* Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType.
* Gecko 1.9.2 (Firefox 3.6) agrega soporte para WOFF.
Ejemplos
--------

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

Muestra en vivo
```

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>
```


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:
```

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

Notas
-----

* En Gecko, las fuentes web están sujetas a la restricción del mismo dominio (los archivos de fuentes deben estar en el mismo dominio que la página que los utiliza), a menos que los controles de acceso HTTP sean utilizados para relajar esta restricción.
* **Nota:** Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado.
* 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.
Compatibilidad del navegador
----------------------------

|  |  |  |
| --- | --- | --- |
| Chrome (WebKit) | **4** (532.5) | Solo fuentes TrueType y OpenType |
|  | **6** (534.3) | Web Open Font Format (WOFF) soporte agregado |
| Opera | **10.0** | Solo fuentes TrueType y OpenType |
| Safari (WebKit) | **3.1** (525.6) | Solo fuentes TrueType y OpenType |
| Navegador | Versión desde | Soporte de |
| --- | --- | --- |
| Internet Explorer | **4.0** | Solo fuentes OpenType embebidas |
| Internet Explorer | **9.0 Preview 3** | Web Open Font Format (WOFF) soporte agregado |
| Firefox (Gecko) | **3.5** (1.9.1) | Solo fuentes TrueType y OpenType |
| **3.6** (1.9.2) | Web Open Font Format (WOFF) soporte agregado |

Vea también MSDN Microsoft library @font-face.

Especificaciones
----------------

* CSS 2 Fonts 1998-05-12 Obsoletas
* CSS 3 Fonts 2009 Borrador de trabajo
* WOFF file format specification Borrador
Vea también
-----------

* FontSquirrel @font-face generator
* About WOFF
* Beautiful fonts with @font-face
* Open Font Library
* 10 Great Free Fonts for @font-face embedding