Propiedad CSS font-family
La propiedad CSS font-family define nombres de familia de fuente o familias genéricas para el elemento seleccionado. Ver ejemplos.
La propiedad CSS font-family establece qué tipografía se usa para renderizar el texto. Se le proporciona una lista priorizada de fuentes, y el navegador recorre esa lista de izquierda a derecha, usando la primera que encuentre en el dispositivo del usuario.
Esta página explica cómo funciona la pila de fuentes, la diferencia entre familias específicas y genéricas, cómo construir una lista de respaldo confiable, y los problemas relacionados con las comillas y la coincidencia por carácter.
Cómo funciona la pila de fuentes
Los valores se separan con comas, y el navegador los trata como alternativas — no como una fuente combinada. Usa la primera fuente de la lista que esté disponible y se detiene:
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;Aquí el navegador prueba primero "Segoe UI". Si no está instalada, prueba Roboto, luego Helvetica, luego Arial, y finalmente el genérico sans-serif, que el navegador siempre satisface con una de sus fuentes integradas. Por eso una pila de fuentes siempre debe terminar con una familia genérica — garantiza que el texto se renderice con algo sensato incluso en un dispositivo que no tenga ninguna de las fuentes preferidas.
Los dos tipos de nombre de fuente
Existen dos tipos de valores que se pueden listar, y una buena pila combina ambos:
family-name— el nombre de una tipografía específica, como"Times New Roman",CourieroArial. Se listan primero porque son las fuentes que realmente se desean.generic-family— una palabra clave de categoría que el navegador asigna a una fuente integrada adecuada. Se lista una de estas al final como respaldo definitivo. Las familias genéricas estándar son:
| Familia genérica | Aspecto típico | Fuentes de ejemplo |
|---|---|---|
serif | Letras con pequeños trazos ("serifas") | Times New Roman, Georgia |
sans-serif | Limpia, sin trazos — común para UI/texto de cuerpo | Arial, Helvetica |
monospace | Todos los caracteres del mismo ancho — para código | Courier New, Consolas |
cursive | Estilo manuscrito / cursivo | Brush Script, Comic Sans |
fantasy | Estilo decorativo de display | Impact, Papyrus |
system-ui | La fuente UI nativa del dispositivo | San Francisco, Segoe UI |
Comillas en los nombres de fuentes
Cuando el nombre de una fuente contiene espacios en blanco (o podría confundirse con una palabra clave), debe encerrarse entre comillas:
/* Multi-word names need quotes */
font-family: "Courier New", "Lucida Console", monospace;
/* Single-word names don't, but quotes are still valid */
font-family: Georgia, serif;Nunca pongas comillas alrededor de la palabra clave de la familia genérica — "sans-serif" se leería como una fuente llamada literalmente "sans-serif" en lugar de la categoría genérica.
Coincidencia por carácter
La selección de fuentes no se detiene en la primera fuente disponible para todo el texto — ocurre carácter por carácter. Si la fuente seleccionada no tiene un glifo para un carácter en particular (por ejemplo, un emoji o una letra no latina), el navegador continúa recorriendo la lista en busca de una fuente que sí lo tenga. Por eso mantener una familia genérica amplia al final ayuda con contenido en varios idiomas o con muchos símbolos.
Para cargar y usar una fuente personalizada que no está instalada en el dispositivo del usuario, defínela con la regla @font-face y luego referencia su nombre en font-family.
| Valor inicial | serif |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredada | Sí. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.fontFamily = "Verdana, sans-serif"; |
Sintaxis
Sintaxis de la propiedad CSS font-family
font-family: family-name | generic-family | initial | inherit;Ejemplo de la propiedad font-family:
Ejemplo de la propiedad CSS font-family con el valor sans-serif
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font-family property example</h2>
<p>We used "Lucida Grande" font-family for this text.</p>
</body>
</html>La pila anterior solicita "Lucida Sans Unicode", recurre a "Lucida Grande" (el equivalente en macOS) y finalmente a lo que el navegador use para sans-serif — así el párrafo se mantiene legible en todas partes.
Construcción de una pila de fuentes robusta
Una pila práctica lista, en orden: la fuente ideal, una o dos alternativas ampliamente instaladas con un aspecto similar, y una familia genérica para cerrarla. Una pila de "fuentes del sistema" que usa la fuente UI nativa de cada plataforma tiene este aspecto:
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}Esto se renderiza con San Francisco en dispositivos Apple, Segoe UI en Windows y Roboto en Android — sin necesidad de descargar ninguna fuente web.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| family-name, generic-family | Lista priorizada de nombres de familia de fuentes y/o nombres de familia genérica. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. | Pruébalo » |
Propiedades relacionadas
font-family generalmente se establece junto con las otras propiedades de fuente, o todas a la vez con el atajo font:
- font-size — el tamaño del texto.
- font-weight — el grosor del texto.
- font-style — cursiva o normal.
- @font-face — carga una fuente web personalizada para referenciarla aquí.