@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.

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

Vea también