Regla CSS @font-face

La regla CSS @font-face te permite cargar una fuente personalizada desde un archivo que alojas (o un servicio web) y usarla en cualquier parte de tu hoja de estilos. Esto significa que ya no estás limitado al puñado de fuentes "web-safe" que están instaladas en la máquina de cada visitante.

Esta página cubre los formatos de fuente que puedes servir, cómo escribir una declaración @font-face robusta con alternativas, la propiedad font-display que controla el comportamiento de carga, los descriptores de fuente disponibles y la alternativa de usar un servicio alojado como Google Fonts.

Cómo funciona @font-face

Una regla @font-face hace dos cosas:

Define un nombre para la fuente con el descriptor font-family (por ejemplo, myFirstFont).
Apunta a uno o más archivos de fuente con el descriptor src.

Una vez declarada, haces referencia a la fuente por ese nombre en cualquier regla font-family normal, exactamente como lo harías con una fuente del sistema:

@font-face {
  font-family: 'myFirstFont';
  src: url('myfirstfont.woff2') format('woff2');
}

p {
  font-family: 'myFirstFont', sans-serif;
}

Siempre termina la pila font-family con una alternativa genérica (como sans-serif) para que el texto siga siendo legible si el archivo de fuente no se carga correctamente.

Formatos de fuente

Los navegadores admiten varios formatos de archivo de fuente: ttf, otf, eot, svg, svgz, woff y woff2. Para la web moderna solo necesitas WOFF2 (con WOFF como alternativa para navegadores más antiguos); el resto son formatos heredados.

OTF-TTF

WOFF fue creado para proporcionar una alternativa comprimida y optimizada para la web a las fuentes OpenType y TrueType, reduciendo el tamaño del archivo y el tiempo de carga. Sin embargo, las capacidades de OpenType pueden interesar a muchos diseñadores (como las ligaduras).

EOT

El formato Embedded Open Type, creado por Microsoft (los innovadores originales de @font-face) hace más de 15 años, es el único formato que IE8 e inferior reconocerá al usar @font-face.

SVG/SVGZ

Scalable Vector Graphics (Font) es un formato de fuente vectorial. Sin embargo, las fuentes SVG han quedado obsoletas y se han eliminado de todos los navegadores modernos. Ya no se recomienda su uso en proyectos nuevos. SVGZ es la versión comprimida de SVG.

WOFF/WOFF2

Web Open Font Format, creado para uso en la web y desarrollado por Mozilla junto con otras organizaciones, las fuentes WOFF a menudo se cargan más rápido que otros formatos porque usan una versión comprimida de la estructura utilizada por las fuentes OpenType (OTF) y TrueType (TTF). WOFF2 es la nueva generación de WOFF y tiene mejor compresión.

Al usar fuentes personalizadas, debemos tener en cuenta las siguientes consideraciones:

El tamaño del archivo. Se recomienda usar opciones que tengan versiones más ligeras.
Las limitaciones del conjunto de caracteres. Puedes limitar los conjuntos de fuentes para cargar solo las fuentes que se usan.
Fuentes del sistema para pantallas pequeñas. Una de las soluciones es orientarse a pantallas más grandes cuando la fuente personalizada se carga con @media.

Sintaxis

Sintaxis de la regla CSS @font-face

@font-face {
  font-properties
}

Ejemplo de la regla @font-face:

Ejemplo de la regla CSS @font-face con formatos EOT, TTF, SVG, WOFF y WOFF2

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Control de la carga con font-display

Mientras se descarga una fuente web, el navegador tiene que decidir qué mostrar. El descriptor font-display controla este equilibrio entre un destello de texto invisible (FOIT) y un destello de texto sin estilo (FOUT):

auto — el comportamiento predeterminado del navegador (generalmente similar a block).
block — oculta el texto brevemente (hasta ~3s), luego muestra la fuente web. Provoca FOIT.
swap — muestra el texto alternativo inmediatamente, luego cambia a la fuente web cuando se carga. Es la mejor opción para el cuerpo del texto porque el contenido nunca es invisible.
fallback — un breve período de bloqueo, luego alternativa; la fuente web solo se intercambia si llega rápidamente.
optional — como fallback, pero el navegador puede omitir completamente la fuente web en conexiones lentas.

swap es la opción más común y se usa en todos los ejemplos que siguen.

Compatibilidad con navegadores

Compatibilidad más amplia posible

Este es el método con mayor compatibilidad. Antes de cualquier estilo, debemos agregar la regla @font-face a la hoja de estilos.

Regla @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

Luego, se usa para dar estilo a los elementos de la siguiente manera:

Regla CSS @font-face

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Nivel práctico de compatibilidad con navegadores

Dado que WOFF y WOFF2 se usan comúnmente, podemos utilizar lo siguiente:

Regla CSS @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  font-display: swap;
}

Compatibilidad con navegadores avanzada

Si estamos trabajando con WOFF, se puede esperar que en algún momento se use WOFF2:

Regla CSS @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Técnicas alternativas

En algunas situaciones, puede ser mejor usar una fuente alojada. Esto lo ofrece Google Fonts como medio para usar sus fuentes. En el siguiente código, se usa @import para cargar una fuente desde Google Fonts:

Regla CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Luego se puede usar para dar estilo a los elementos:

Regla CSS @font-face

body {
  font-family: 'Open Sans', sans-serif;
}

Un servicio alojado puede tener una ventaja. Probablemente incluirá todas las variaciones del archivo de fuente proporcionando una amplia compatibilidad entre navegadores, y no será necesario alojar los archivos nosotros mismos.

Regla CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

De la misma manera, se puede enlazar una hoja de estilos al mismo recurso en el <head> del documento HTML y no en el CSS.

HTML

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Luego, los elementos se pueden estilizar como con los otros métodos:

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

De nuevo, las reglas @font-face se importan pero se agregan al <head> de HTML:

CSS

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Ejemplo de la regla @font-face usando Google Fonts:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Valores

Descriptor de fuente	Valores	Descripción
font-family	name	Define el nombre de la fuente y es obligatorio.
src	URL	Define la URL desde donde se descargará la fuente y es obligatorio.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Define cómo se estirará la fuente. Su valor predeterminado es normal y es opcional.
font-style	normal italic oblique	Define cómo se estilizará la fuente. Su valor predeterminado es normal y es opcional.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Define el grosor de la fuente. Su valor predeterminado es normal y es opcional.
unicode-range	unicode-range	Define el rango de caracteres unicode que admite la fuente. Su valor predeterminado es U+0-10FFFF y es opcional.

Uso de local() en src

Dentro de src puedes listar local('Font Name') antes de las entradas url(). El navegador usará una fuente que ya esté instalada en la máquina del usuario y solo descargará el archivo si no se encuentra ninguna, ahorrando ancho de banda:

@font-face {
  font-family: 'MyWebFont';
  src: local('My Web Font'),
       url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

Capítulos relacionados

@import — incluye otra hoja de estilos, incluyendo una CSS de fuente alojada.
@media — carga fuentes personalizadas de forma condicional, por ejemplo solo en pantallas más grandes.
font-family, font-weight y font-style — aplica la fuente que definiste.

Práctica

¿Cuál es el propósito de la regla @font-face en CSS?

Especificar una fuente personalizada en tu página webCambiar el color de fondo de un sitio webAgregar una hoja de estilos externa a un documento HTMLIncrustar una fuente en una página webControlar el diseño de una página web