`@font-face`: cargar fuentes propias

`@font-face`

@font-face es la regla CSS que le dice al navegador cómo descargar y registrar una fuente. Es exactamente lo que Google Fonts genera en su hoja de estilos — pero se puede escribir a mano para usar fuentes que no están en Google Fonts o que se alojan en el propio servidor.

Sintaxis básica

@font-face {
  font-family: "MiFuente";                                   /* (1) nombre propio */
  src: url("fuentes/mifuente.woff2") format("woff2");       /* (2) archivo + formato */
}

/* Usar la fuente definida */
h1 {
  font-family: "MiFuente", serif;   /* mismo nombre que en el @font-face */
}

Los dos descriptores obligatorios son font-family y src. Los demás son opcionales.

Descriptores

Descriptor	Obligatorio	Qué hace
`font-family`	Sí	Define el nombre con el que se referenciará la fuente en el resto del CSS. Es un nombre arbitrario — puede ser cualquier string. Convención: entre comillas, descriptivo.
`src`	Sí	URL del archivo y hint de formato. `url("ruta")` indica dónde está el archivo; `format("woff2")` es un hint para que el navegador sepa si puede usarlo antes de descargarlo.
`font-weight`	No (default: `normal`)	Si tenés varios archivos para distintos pesos de la misma familia, declarás un `@font-face` por peso.
`font-style`	No (default: `normal`)	`font-style: italic` para el archivo de la variante itálica.

Múltiples variantes de la misma familia

Para una familia con varios pesos y estilos, se declara un bloque @font-face por variante:

/* Regular */
@font-face {
  font-family: "Apertura";
  src: url("apertura-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: "Apertura";
  src: url("apertura-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: "Apertura";
  src: url("apertura-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

/* El navegador elige el archivo correcto según el contexto */
body {
  font-family: "Apertura", sans-serif;
}

Con esta estructura, al escribir font-weight: 700 en algún elemento el navegador usa automáticamente apertura-bold.woff2. No es necesario usar el nombre del archivo directamente — el navegador lo resuelve a través del @font-face.

Error crítico: el nombre debe coincidir

Si el nombre en font-family dentro de @font-face no coincide con el nombre que se usa en la propiedad font-family de los elementos, la fuente no aplica:

@font-face {
  font-family: "Apertura";   /* nombre registrado */
  src: url("apertura.woff2") format("woff2");
}

h1 {
  font-family: "apertura", sans-serif;   /* minúscula — igual: la coincidencia es case-insensitive */
}

h2 {
  font-family: "Apertura ", sans-serif;  /* espacio extra — NO coincide */
}

p {
  font-family: "Apert", sans-serif;      /* nombre truncado — NO coincide */
}

La coincidencia es case-insensitive pero debe ser textualmente idéntica (sin espacios extra ni caracteres distintos).

`local()` — mención

src también acepta local() para buscar primero una copia instalada en el sistema:

@font-face {
  font-family: "Roboto";
  src: local("Roboto"), url("roboto.woff2") format("woff2");
}

Si el usuario ya tiene Roboto instalada, el navegador la usa directamente y evita la descarga. Si no, descarga el archivo. Es una optimización útil en self-hosting.

Transparencia sobre el sandbox: los archivos de fuente locales (url("fuente.woff2")) no existen en el sandbox, por lo que el navegador no puede descargarlos. El bloque @font-face se parsea correctamente, pero la fuente no carga. Este módulo no incluye un ejercicio de @font-face por esa razón — la práctica integrada de la lección 4 usa Google Fonts, donde lo validable es la estructura del <head> y la declaración de font-family.