En CSS, es posible que vea un conjunto de reglas como este:
html {
font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}¿Qué diablos, verdad? ¿Por qué no le digo qué tipo de letra quiero usar y ya está? Toda la idea aquí son alternativas. El navegador intentará usar la fuente que especificó primero (Lato, en este caso), pero si no tiene esa fuente disponible, seguirá bajando por esa lista. Entonces, para ser realmente detallado aquí, lo que dice esa regla es:
- Me gustaría usar la fuente Lato aquí, por favor.
- Si no tiene eso, pruebe “Lucida Grande” a continuación.
- Si no tiene eso, pruebe Tahoma.
- Todo lo demás falla, use lo que tenga para la palabra clave genérica
Sans-Serif
Entonces, ¿en qué situación un navegador no tendría la fuente que está solicitando? Eso es bastante común. Solo hay un puñado de fuentes que se consideran “seguras para la Web”, lo que significa que es probable que la mayoría de las computadoras que visitan su sitio tengan esa fuente instalada y, por lo tanto, el navegador pueda usarla. Piense: Arial, Times New Roman, Courier, Georgia, Verdana y algunos otros.
Pero la mayoría de los sitios web, en estos días, utilizan fuentes web personalizadas. Cargan una fuente como recurso (al igual que un sitio web carga CSS en sí mismo como un recurso, una imagen o JavaScript), entonces esa fuente está disponible para su uso. Las populares fuentes de Google lo dejan bastante claro:
Cargue esta fuente primero, luego podrá usarla en CSS.
Incluso cuando carga una fuente de esta manera, es posible que la fuente no se cargue. Si bien Google es un host generalmente muy confiable, no controlas sus servidores; ellas hacen. Incluso con más frecuencia, las conexiones de red deficientes pueden impedir que se cargue una fuente. En cualquier escenario de falla en la carga de fuentes, esa es otra situación en la que una pila de fuentes de respaldo es útil.
Digamos que estoy usando la fuente personalizada Merriweather, y configuro mi pila de fuentes así:
html {
font-family: Merriweather, Impact, Serif;
}Si Merriweather no se carga (o se carga, pero se carga de tal manera que aparece en su lugar después de hacerlo, también conocido como FOUT), veríamos algo como esto:
Se ve una fuente alternativa, en este caso Impact. Es increíblemente incómodo y no coincide en absoluto con el aspecto deseado.
¡Es mejor que su fuente se acerque a algo parecido a su primera elección que a algo que no tenga ninguna relación! Hay una herramienta fantástica de Monica Dinculescu llamada Font style matcher donde puedes jugar con alternativas (así es como hice ese GIF arriba).
En el ejemplo anterior, podemos ver que Georgia es una fuente alternativa mucho más agradable que Impact. Sin embargo, el ejemplo es un poco más elegante que simplemente cambiar la fuente. Se cambiaron un par de configuraciones más para que coincidieran con la mayor precisión posible. Para aprovechar eso, estás en un territorio de carga de fuentes, que se vuelve un poco complejo. Su mejor opción es consultar la Guía completa de carga de fuentes de Zach Leatherman. En cualquier caso, solo vale la pena elegir una fuente de respaldo agradable.
Personajes individuales
Una nota interesante sobre las fuentes alternativas es que no es todo o nada. Los caracteres individuales de una fuente pueden caerse de la pila si la fuente especificada no tiene ese carácter disponible.
Como ejemplo extremo, cargaré la fuente personalizada Source Code Pro de Google Fonts, pero la obligaré a contener solo un puñado de letras.
Puede ver en la primera oración cómo las fuentes alternativas se hicieron cargo y el resultado final no fue desastroso (como la segunda oración) a pesar de que la fuente personalizada no tenía algunos de los caracteres disponibles. Es más probable que esto suceda con cosas como caracteres ASCII poco comunes o incluso con caracteres acentuados como ü, ā o ñ.
Como diversión adicional, aquí está usando esa capacidad de reserva de caracteres de CSS para hacer algo único:
Más lectura
- Fragmentos de pila de fuentes: algunas pilas de fuentes comunes
- Pila de fuentes CSS: una colección de pilas de fuentes CSS seguras para la web
- Pila de fuentes del sistema: un fragmento que utiliza la fuente del sistema predeterminada de la computadora