font-family

font-family es la propiedad CSS que determina con qué tipografía se renderiza el texto de un elemento. A diferencia de muchas propiedades de diseño, font-family no controla el tamaño ni el peso del texto — eso es trabajo de font-size y font-weight respectivamente — sino la forma de los caracteres en sí: los trazos, las serifas, el estilo visual de las letras. Es una de las propiedades más importantes de cualquier hoja de estilos y, junto con font-size y color, forma la base de la identidad tipográfica de cualquier sitio web.

Lo que hace font-family es establecer una pila de fuentes: una lista de nombres de tipografías separados por coma, en orden de preferencia. El navegador intenta cargar la primera; si no está instalada en el sistema del usuario, prueba la segunda; si tampoco, la tercera; y así hasta llegar al último elemento de la lista, que siempre debe ser una familia genérica (serif, sans-serif, monospace…). Esta familia genérica es la red de seguridad que garantiza que el texto siempre tenga un estilo reconocible, aunque ninguna de las fuentes específicas esté disponible.

font-family hereda por defecto: si la declarás en body, todos los elementos de la página la heredan automáticamente y no tenés que repetirla en cada selector. Esta herencia es el fundamento de cualquier sistema tipográfico CSS — se declara una vez en la raíz y se sobreescribe solo donde se necesite otra fuente.

Cómo funciona

Cuando el navegador encuentra font-family, recorre la pila de izquierda a derecha buscando la primera fuente disponible. Disponible significa que está instalada en el sistema operativo del usuario, o cargada mediante @font-face o un servicio de web fonts (CAT-21). Si ninguna fuente específica está disponible, la familia genérica del final actúa como fallback: el navegador elige la mejor fuente de su sistema que coincida con esa categoría genérica.

El navegador no combina fuentes: usa una sola fuente de la pila para renderizar el elemento completo. La selección ocurre carácter por carácter en algunos casos especiales (por ejemplo, cuando el texto tiene caracteres que la fuente principal no cubre), pero en el uso habitual toda la cadena de texto recibe la primera fuente disponible de la lista.

/* La pila se recorre de izquierda a derecha */
body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Cada tipografía en su contexto habitual */
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
}

code, pre {
  font-family: "Fira Code", Consolas, "Courier New", monospace;
}

Sintaxis

selector {
  font-family: "Nombre Fuente", fuente-alternativa, genérico;
}

Reglas de escritura:

• Nombres de fuentes con espacios van entre comillas: "Times New Roman", "Fira Code".
• Nombres de una sola palabra no necesitan comillas: Arial, Georgia, serif.
• El genérico de cierre nunca lleva comillas: serif, sans-serif, monospace.
• La lista es sensible a mayúsculas en algunos sistemas: preferí escribirla exactamente como aparece el nombre de la fuente.

Valores

Nombres de fuentes específicas

Una fuente específica se referencia por su nombre exacto. Si el nombre contiene espacios, va entre comillas:

font-family: Georgia;
font-family: "Times New Roman";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

El navegador busca esta fuente en las instaladas del sistema operativo. Si no la encuentra, pasa a la siguiente en la lista.

Cuándo usarlo: siempre, como primer o segundo elemento de la pila. Nunca como único valor (sin genérico de cierre).

Web-safe fonts

Las web-safe fonts son tipografías instaladas de manera predeterminada en la inmensa mayoría de sistemas operativos (Windows, macOS, Linux, iOS, Android). Declararlas como primera o segunda opción en la pila garantiza que el texto tenga una tipografía reconocible en casi cualquier dispositivo, sin necesidad de cargar archivos externos.

Las más confiables:

Una pila bien armada combina web-safe fonts como alternativa de la fuente principal y un genérico al final:

/* Fuente principal, fallback web-safe, fallback genérico */
body {
  font-family: "Source Sans Pro", Arial, sans-serif;
}

Cuándo usarlo: como segunda o tercera opción en la pila, para garantizar una experiencia aceptable cuando la fuente principal no carga.

Familias genéricas

Una familia genérica no es una fuente concreta: le indica al navegador la categoría estilística que necesitás, y el navegador elige la mejor fuente de su sistema que se ajuste a esa categoría. Las familias disponibles son:

serif — tipografías con serifas (los pequeños remates en los extremos de los trazos). Evocan tradición, formalidad, lectura en cuerpo largo en papel. Ejemplos del sistema: Times New Roman (Windows), Georgia, Palatino.

sans-serif — tipografías sin serifas. Modernas, limpias, legibles en pantalla. Las más usadas en interfaces digitales. Ejemplos del sistema: Arial, Helvetica, Verdana, Roboto (Android/Chrome).

monospace — cada carácter ocupa exactamente el mismo ancho. Esencial para código fuente, terminals, datos tabulados donde el alineamiento importa. Ejemplos del sistema: Courier New, Consolas (Windows), Menlo (macOS).

cursive — imita la escritura a mano. Uso muy limitado en interfaces: solo para decoración o marcas con personalidad específica. La disponibilidad varía mucho entre sistemas.

system-ui — usa la fuente por defecto del sistema operativo para interfaces (San Francisco en macOS/iOS, Segoe UI en Windows, Roboto en Android). Ideal para aplicaciones que quieren sentirse nativas del sistema.

.interfaz  { font-family: system-ui, sans-serif; }
.codigo    { font-family: monospace; }
.articulo  { font-family: serif; }

Cuándo usarlo: siempre como último elemento de la pila. Nunca como único valor si tenés una preferencia estilística, porque el resultado varía mucho entre sistemas.

Web fonts y @font-face

Más allá de las web-safe fonts, CSS permite cargar cualquier tipografía desde un servidor mediante @font-face o servicios como Google Fonts. Esto abre toda la paleta tipográfica del diseño a la web. Esas técnicas se documentan en la familia CAT-21 · Web fonts (próximamente en la referencia).

En font-family, el nombre que usás para referenciar una web font debe coincidir exactamente con el nombre declarado en el @font-face:

/* En CAT-21 verás cómo declarar la fuente */
@font-face {
  font-family: "MiFuente"; /* nombre que elijo */
  src: url("/fonts/mifuente.woff2") format("woff2");
}

/* Acá la uso como cualquier otra */
body { font-family: "MiFuente", sans-serif; }

Cuándo usar qué

Notas, gotchas e interacción

• Siempre cerrá la pila con un genérico. Si ninguna fuente específica está disponible, el navegador no tiene forma de elegir un estilo sin el genérico. Sin él, cae al default del navegador (Times New Roman en muchos), que probablemente no es lo que querés.
• Comillas en nombres con espacios — fácil de olvidar. font-family: Times New Roman, serif es inválido; el navegador interpreta Times, New, Roman como tres fuentes separadas. El correcto es "Times New Roman", serif.
• font-family no determina el tamaño, el peso ni el color del texto. Esas son propiedades independientes (font-size, font-weight, color). Un cambio de fuente no cambia ningún otro atributo tipográfico.
• Herencia y <button>, <input>. Estos elementos no heredan font-family del padre por defecto en algunos navegadores. El reset moderno (font: inherit o font-family: inherit) normaliza este comportamiento.
• Los valores numéricos de font-weight disponibles dependen de la fuente. Si una web-safe font solo tiene las variantes 400 y 700, font-weight: 300 se renderiza igual que 400. Ver font-weight para el detalle.
• font shorthand. Existe la propiedad abreviada font que permite escribir font-style, font-weight, font-size, line-height y font-family en una sola declaración (font: italic bold 1.2rem/1.5 Georgia, serif). En la práctica, el shorthand se usa poco porque sobreescribe todas las sub-propiedades, incluso las que no se declaran.

Vigente / legacy

font-family está vigente desde CSS1 sin cambios en su semántica. La familia genérica system-ui se añadió más tarde y tiene soporte amplio en navegadores modernos. Las familias math, emoji y fangsong existen en la especificación como genéricos especializados pero tienen uso muy limitado.

No hay forma legacy para font-family: la sintaxis de pila con genérico final es la misma desde los años 90 y sigue siendo el enfoque correcto.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección La fuente: family, size, weight, style.