Para cambiar la fuente en CSS utiliza font-family. Puedes elegir una tipografía disponible en el dispositivo o cargar un archivo propio mediante @font-face. En ambos casos conviene definir una familia alternativa.
body {
font-family: Arial, Helvetica, sans-serif;
}Escribir el nombre de una fuente no la descarga. Si esa tipografía no está instalada ni declarada con una fuente web válida, el navegador utilizará la siguiente opción disponible.
Cómo elegir una fuente del sistema
body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.6;
color: #1f2937;
}Esta pila aprovecha fuentes de interfaz del dispositivo. Puede verse distinta entre sistemas operativos, pero evita descargar un archivo solo para mostrar el texto.
Las familias con espacios pueden escribirse entre comillas. Las familias genéricas, como sans-serif o serif, se escriben sin ellas.
Cómo añadir una fuente propia con font-face
Guarda archivos con permiso de uso web dentro de una carpeta fuentes. El siguiente ejemplo supone que tu CSS está en una carpeta hermana llamada css:
@font-face {
font-family: "MiFuente";
src: url("../fuentes/mi-fuente-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "MiFuente";
src: url("../fuentes/mi-fuente-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
body { font-family: "MiFuente", Arial, sans-serif; }
h1, h2 { font-weight: 700; }Sustituye las rutas por las de tus archivos reales. Los pesos declarados deben coincidir con los archivos: llamar «bold» a un archivo regular no lo convierte en negrita.
Qué hace font-display: swap
Permite mostrar el texto con una fuente de respaldo durante la carga y sustituirla cuando esté disponible la fuente web, tras el breve periodo inicial que determine el navegador. Evita depender de que el archivo llegue inmediatamente para poder leer.
El cambio puede producir desplazamientos si las métricas de las fuentes son diferentes. Elige una alternativa razonable y revisa los saltos de línea y el movimiento del diseño.
Cómo configurar una fuente variable
Si el archivo es realmente variable y admite un intervalo de pesos, puedes declarar ese rango:
@font-face {
font-family: "MiVariable";
src: url("../fuentes/mi-variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}No asignes un rango por conveniencia a un archivo estático. Revisa qué ejes y valores admite la fuente que has descargado.
Por qué no se aplica la tipografía
- Revisa si la solicitud devuelve un 404 en la pestaña Red.
- Comprueba que el nombre de font-family coincide en la declaración y en el selector.
- Consulta la fuente realmente renderizada en el inspector.
- Busca reglas que sobrescriban la familia o el peso.
- Revisa permisos de origen si el archivo procede de otro servidor.
Rendimiento y legibilidad
Carga solo los estilos y pesos que uses. Comprueba caracteres españoles, tildes y símbolos necesarios antes de utilizar un subconjunto reducido. No conviertas los títulos en imágenes para conservar una tipografía: perderías flexibilidad y texto accesible.
Preguntas frecuentes
¿Puedo usar cualquier fuente descargada?
Debes disponer de licencia para el uso que vayas a darle. Una licencia de escritorio no siempre cubre la incrustación web.
¿Por qué los botones muestran otra letra?
Algunos controles tienen estilos propios. Puedes aplicar font: inherit al componente y revisar el resultado.
Organiza tu jerarquía con encabezados HTML y continúa con los tutoriales de CSS.
Referencia técnica: documentación de MDN.
