¿Cómo puedo cambiar el tipo de fuente de un texto usando la propiedad font-family en CSS?
Cambia la fuente de tu texto con font-family. Aprende a crear una lista de fuentes (font stack) y a usar familias genéricas de respaldo. ¡Tipografía fácil!
Para cambiar el tipo de fuente de un texto en CSS, se utiliza la propiedad font-family. Esta propiedad te permite especificar una lista priorizada de nombres de fuentes que el navegador intentará aplicar al texto del elemento seleccionado.
El funcionamiento es sencillo: proporcionas una lista de nombres de fuentes separados por comas. El navegador intentará usar la primera fuente de la lista. Si no está disponible en el sistema del usuario o no se ha cargado mediante @font-face, intentará con la segunda, y así sucesivamente. Esto se conoce como «pila de fuentes» o «font stack».
Es una práctica recomendada y muy importante terminar la lista con una palabra clave de familia genérica, como serif (fuentes con remates, como Times New Roman), sans-serif (fuentes sin remates, como Arial) o monospace (fuentes de ancho fijo, como Courier). Esto asegura que si ninguna de tus fuentes específicas está disponible, el navegador utilizará una fuente predeterminada del tipo genérico que sí lo esté, manteniendo una cierta coherencia visual.
Si el nombre de una fuente contiene espacios, debes escribirlo entre comillas (simples o dobles).
Aquí tienes un ejemplo:
body {
font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
}
h1 {
font-family: "Georgia Pro", Georgia, serif;
}
pre, code {
font-family: "Courier New", Courier, monospace;
}Lenguaje del código: PHP (php)En el primer ejemplo, el navegador buscará primero «Helvetica Neue», luego Arial, después Verdana y, si ninguna está disponible, recurrirá a la fuente sans-serif por defecto del sistema.
