No necesitas miles de fuentes para crear un sitio web con una apariencia atractiva. Pero sí necesitas asegurarte de que las fuentes que uses sean visibles para todos los que visiten tu sitio web. Y ahí es donde entran en juego las fuentes seguras para la web.
Y si pudieras encontrar fuentes seguras para la web que a) sean 100% gratuitas y b) no necesiten ser alojadas en ningún otro lugar para que tus visitantes las vean, sería un verdadero jonrón para ti.
Para eso se ha escrito este post: cubriremos las 31 fuentes seguras más bonitas de la web y te mostraremos exactamente cómo implementarlas en tu sitio de WordPress.
Utiliza los siguientes enlaces para navegar a la sección que más te interesa, o salta directamente a nuestra lista de fuentes seguras para la web:
¿Qué fuentes son seguras para la Web?
Incluyendo diversas variantes, hay más de 650.000 fuentes diferentes disponibles en línea. Se considera que las fuentes que son compatibles con la mayoría de los navegadores web y sistemas operativos son seguras para la web. El sistema operativo incluye automáticamente los archivos de fuentes, de modo que los visitantes no tienen que descargar las fuentes de tus servidores.
Un ejemplo es la omnipresente fuente Arial que dio lugar a miles de «spin-offs».
¿Son necesarias las fuentes seguras en la Web en 2024?
Claro, la gran mayoría de los usuarios ahora usan Google Chrome, tanto en el móvil como en el escritorio. Pero eso no significa que las fuentes seguras en la web sean cosa del pasado.
De hecho, las fuentes admitidas varían en función de los sistemas operativos, incluida la versión actual que tiene el usuario. Así que si diseñas un sitio web con una fuente que solo es compatible con la versión más reciente de Windows 10, la mayoría de los usuarios verán algo más.
Además, si decides utilizar y alojar una fuente local personalizada, o una fuente alojada por un tercero, puede ralentizar tu sitio web. Por lo tanto, cambiar a fuentes seguras para la web puede acelerar tu sitio web. Y eso es algo genial. Porque casi el 70% de los consumidores dicen que la velocidad de la página influye en sus decisiones de compra.
¿Son seguras las Google Fonts en la Web?
Google Fonts no son inherentemente compatibles con tu sistema operativo, por lo que, por definición, no son fuentes seguras para la Web. Más bien, puesto Google, un proveedor externo, las aloja, Google Fonts se llama fuente web. Sabemos que es confuso, pero la diferencia es que tu navegador necesita cargar un archivo antes de poder mostrar las fuentes de Google.
Las fuentes seguras para la web ya tienen archivos de fuentes listos en la mayoría de los dispositivos. Pero, no te preocupes por la falta de la palabra «seguro». Google Fonts son completamente seguras para mejorar el diseño de tu sitio web. Pero, las peticiones HTTP adicionales a un servidor externo podrían disminuir la velocidad de carga de tu página.
Más de 31 de las mejores fuentes seguras para la web
Hemos recopilado una lista de más de treinta fuentes seguras para la web de gran apariencia que puedes usar para diseñar tu sitio web.
Vamos directamente al grano.
1. Arial
Arial es una fuente clásica sin serifas, adecuada tanto para párrafos como para titulares. Ha sido durante mucho tiempo un elemento básico en el diseño web. Aunque en los últimos años, a menudo se utiliza como una alternativa en una pila de fuentes, en lugar de como la fuente principal de la familia.
Pila de fuentes recomendadas
Font-family: Arial, Helvetica Neue, Helvetica, sans-serif.
2. Baskerville
Baskerville es una fuente con serifas relativamente gruesas, originalmente desarrollada como un tipo de letra por John Baskerville en 1750. El diseño está bien equilibrado, usando una mezcla de trazos gruesos y finos para suavizar los bordes duros de un típico tipo de letra serif. Está bien soportada por las nuevas versiones de los sistemas operativos de Apple y Microsoft.
Pila de fuentes recomendadas
Font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif.
3. Bodoni MT / Bodoni 72
Bodoni MT es una fuente con serifas, como Times New Roman, más adecuada para el texto de un párrafo que para los titulares de la mayoría de los sitios web. Bodoni MT está disponible por defecto con Microsoft 10 y algunas versiones anteriores. Bodoni 72 se incluye con MacOS Sierra y versiones más recientes.
Pila de fuentes recomendadas
Font-family: Bodoni MT, Bodoni 72, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif.
4. Calibri
Calibri es la fuente estándar sin serifas de Microsoft y lo ha sido desde su lanzamiento con Microsoft Office 2007. Tiene un aspecto suave y moderno, con bordes redondeados para elevar la típica sensación sans serif, haciéndola más cálida que la robótica.
Pila de fuentes recomendadas
Font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif.
5. Calisto MT
Calisto MT es una fuente con serifas ligeramente más suaves y menos pronunciadas que la mayoría de los tipos de letra similares. Es una fuente estándar de Microsoft, incluida en la mayoría de las nuevas versiones de Windows. El equivalente de MacOS o iOS es la fuente Bookman Old Style.
Pila de fuentes recomendadas
Font-family: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif.
6. Cambria
Cambria es una fuente con serifas aún más suaves, en muchos casos, con serifas apenas perceptibles incluso para las letras mayúsculas. Esto le da una sensación más moderna y también mantiene un alto nivel de legibilidad en las pantallas.
Pila de fuentes recomendadas
Font-family: Cambria, Georgia, serif.
7. Candara
Candara es una fuente sin serifas. Es parte de la colección de fuentes ClearType de Microsoft. El equivalente en macOS y iOS es Optima Regular. Los pesos desiguales de los trazos hacen que se sienta un poco menos moderna y corporativa que otras fuentes sin serifas.
Pila de fuentes recomendadas
Font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif.
8. Century Gothic
Century Gothic es una fuente geométrica sin serifas, con un aspecto muy limpio y equilibrado. Es una gran fuente para la web, especialmente para los títulos y subtítulos. Fue diseñada originalmente para competir con la fuente Futura. Está incluida en la mayoría de los sistemas operativos de Microsoft y Apple.
Pila de fuentes recomendadas
Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif.
9. Consolas
Consolas es una fuente sin serifas con un enfoque único de diseño. Todos los caracteres tienen el mismo ancho, por lo que utiliza serifas solo para la letra «I» y la «l» minúscula. Es parte de la colección ClearType.
Pila de fuentes recomendadas
Font-family: Consolas, monaco, monospace.
10. Copperplate Gothic
Copperplate Gothic es una fuente de inspiración gótica, con leves serifas glíficas en ciertas letras. Como está inspirada en las runas góticas, no hay ninguna fuente en minúsculas disponible.
Pila de fuentes recomendadas
Font-family: Copperplate, Copperplate Gothic Light, fantasy.
11. Courier New
Courier New es una fuente con serifas monoespaciadas, con un texto regular mucho más delgado que la mayoría de las otras fuentes serifas y sin serifas. Tiene una cobertura casi perfecta por parte de Microsoft y Apple tanto en ordenadores como en dispositivos móviles.
Pila de fuentes recomendadas
Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace.
12. Dejavu Sans
Dejavu Sans es una fuente sin serifas con líneas limpias y rectas, casi como un retorno a las fuentes sans clásicas como Arial y Verdana.
Pila de fuentes recomendadas
Font-family: Dejavu Sans, Arial, Verdana, sans-serif.
13. Didot
Didot es una fuente inspirada en los tipos de letra originales Didot, utilizados por la imprenta francesa del siglo XIX, la familia Didot. Es un pilar de Apple, apoyado por la mayoría de sus sistemas operativos y dispositivos.
Pila de fuentes recomendadas
Font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif.
14. Franklin Gothic
Franklin Gothic es una fuente sin serifas con letras inusualmente gruesas, casi como si fuera la versión en negrita de otra fuente. El tipo de letra original fue desarrollado a principios del siglo XX por los fundadores de la tipografía americana. Es una buena elección de fuente para los titulares, pero podría no ser una gran elección para el cuerpo del texto.
Pila de fuentes recomendadas
Font-family: Franklin Gothic, Arial Bold.
15. Garamond
Garamond es una fuente con serifas, inspirada en los tipos de letra hechos por el grabador parisino del siglo XVI, Claude Garamond. Tiene bordes más suaves y redondeados que algunas de las fuentes serif más estándar, como Times New Roman. Las versiones modernas de los sistemas operativos de Microsoft y Apple incluyen sus propias versiones de la fuente Garamond.
Pila de fuentes recomendadas
Font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif.
16. Georgia
Un pariente cercano de Garamond, Georgia es otra fuente serifa con bordes mayormente redondeados y una sensación bastante cálida. Fue desarrollada para Microsoft en 1996 y sigue siendo una de las fuentes de MS más extendidas. Está soportada por prácticamente todas las versiones de Windows y MacOS.
Pila de fuentes recomendadas
Font-family: Georgia, Times, Times New Roman, serif.
17. Gill Sans
Gill Sans es una fuente sin serifas, con líneas nítidas y limpias que le dan un aspecto moderno. No es ideal para el texto de un párrafo fuera de la caja, debido a su falta de contraste entre las letras, y al poco espacio entre ellas. Pero como se puede ver en el texto de ejemplo, es un titular muy atractivo. La mayoría de los dispositivos de iOS, macOS y Windows lo soportan.
Pila de fuentes recomendadas
Font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif.
18. Goudy Old Style
Goudy Old Style es una fuente suave con serifas de estilo antiguo, con fuertes serifas y un aspecto anticuado. Los periodos tienen forma de diamante en lugar de los círculos redondos perfectos regulares de la mayoría de las fuentes con serifas. Se incluye en la mayoría de las nuevas versiones de Windows.
Pila de fuentes recomendadas
Font-family: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif.
19. Helvetica
La Helvética es quizás la fuente más famosa de todos los tiempos, y definitivamente una de las únicas fuentes que tiene su propio documental dedicado. Es una fuente moderna sin serifas, inspirada en otras fuentes modernas suizas y alemanas de finales del siglo XIX y principios del XX.
En lugar de un diseño suave, redondeado y cálido, es equilibrado y se centra en líneas y formas limpias. Esto lo convierte en una de las pocas fuentes adecuadas tanto para el cuerpo del texto como para los titulares. Todos los dispositivos de Apple incluyen fuentes Helvetica, mientras que Microsoft utiliza por defecto Arial, su equivalente en MS.
Pila de fuentes recomendadas
Font-family: Helvetica Neue, Helvetica, Arial, sans-serif.
20. Impact
Impact es una fuente realista sin serifa, con un aspecto muy grueso en negrita como su valor predeterminado para todo el texto, en mayúsculas y en minúsculas por igual. La negrita la hace destacar del texto normal y la hace perfecta para titulares o CTA (calls to action), pero no es ideal para el cuerpo del texto.
Era parte de las fuentes originales del paquete web en 1998. Aún hoy en día está ampliamente incluida y soportada por los ordenadores y teléfonos de Apple y Windows.
Pila de fuentes recomendadas
Font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif.
21. Lucida Bright
Lucida Bright es la fuente con serifas de la línea de fuentes Lucida de Microsoft, desarrollada para MS en 1991. Una de las cosas que la hace destacar es el uso de serifas más cuadradas y robustas, por ejemplo en la «T» y la «L» mayúsculas. Se incluye por defecto en la mayoría de las versiones más recientes de Windows, mientras que MacOS suele incluir solo la fuente sin serifas Lucida Grande, lo que hace que Georgia sea una fuente alternativa lógica.
Pila de fuentes recomendadas
Font-family: Lucida Bright, Georgia, serif.
22. Lucida Sans
Lucida Sans es una fuente sin serifas de corte limpio y humanista, diseñada específicamente para complementar las fuentes con serifas de la línea Lucida. Hay una mayor variación en el peso del trazo que con las fuentes sans limpias como Helvetica o Arial. Esto hace que se sienta un poco menos futurista o robótica, y más juguetona. Fuera de la caja, es una gran fuente para titulares y CTAs.
Pila de fuentes recomendadas
Font-family: Lucida Sans, Helvetica, Arial, sans-serif.
23. Microsoft Sans Serif
Microsoft Sans Serif es una fuente sin serifas introducida por primera vez en Windows 2000. Es la sucesora de la fuente MS Sans Serif, también conocida como Helv (abreviatura de Helvetica). Está inspirada y basada en Helvetica, el tipo de letra sin serifas líder en los tiempos modernos.
Es una fuente limpia con un peso uniforme de trazo, lo que lleva a un aspecto limpio y profesional. Perfecto para los titulares y los sitios web corporativos. Se incluyó como una de las fuentes originales para la web y sigue siendo estándar para todos los dispositivos de Microsoft.
Pila de fuentes recomendadas
Font-family: MS Sans Serif, sans-serif.
24. Optima
Optima es una fuente humanista sin serifas, con peso de trazo variable y simetría variable. Esto hace que parezca casi hecha a mano, lo que combate la típica sensación de producción en masa de una fuente sin serifa. Es una de las fuentes sin serifas estándar de Apple y es compatible con la mayoría de los dispositivos iOS y macOS. El equivalente de Microsoft es Segoe.
Pila de fuentes recomendadas
Font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif.
25. Palatino
Palatino es otra serpiente de estilo antiguo y se sentiría como en casa en cualquier periódico o revista en línea. Pero es menos uniforme que algo como una Georgia o un Times New Roman, con diferentes pesos y formas de trazos.
El enfoque del diseño ayuda a suavizar las letras afiladas como la k, l, x, y, z. También es ligeramente más audaz que otras fuentes con serifas. Estos dos factores ayudan a que se sienta un poco más cálido. Palatino se incluye en la mayoría de los dispositivos de Windows y Apple.
Pila de fuentes recomendadas
Font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif.
26. Perpetua
Perpetua es una fuente con serifas con un diseño único, originalmente creada por el escultor inglés Eric Gill. Hay un fuerte contraste en el peso del trazo, por ejemplo, mira la «e» minúscula o el número «3». Esto le da a la fuente una calidad creativa, casi lúdica. Normalmente es una fuente de Windows, pero Baskerville, un pariente cercano, es estándar en la mayoría de los dispositivos de Apple.
Pila de fuentes recomendadas
Font-family: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif.
27. Rockwell
Rockwell es una fuente cuadrada o con serifas de losa con letras muy negritas, casi de ocho peniques. Es adecuada para los titulares o CTA, pero el peso añadido de la fuente no es bueno para el cuerpo del texto. Está incluida en la mayoría de las nuevas versiones de MS Windows.
Pila de fuentes recomendadas
Font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif.
28. Segoe UI
La UI de Segoe es la principal fuente sin serifas de la familia de fuentes Segoe. Microsoft no solo la usa en muchas aplicaciones sino también en varios materiales de marketing para sus productos.
Es un tipo de letra moderno, con letras simétricas y poca variación en el peso del trazo. La fuente no está incluida en las computadoras de Apple, pero el equivalente de Helvetica Neue es similar en apariencia y sensación.
Pila de fuentes recomendadas
Font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif.
29. Tahoma
Tahoma es otra fuente sin serifas desarrollada por Microsoft. Tiene letras ligeramente más negras que la interfaz de usuario de Segoe y utiliza puntos cuadrados para sus letras minúsculas, puntos y otras marcas.
Es una fuente limpia y uniforme, y no se sentiría fuera de lugar en el contenido o los encabezados. Está incluida en todos los dispositivos de Microsoft, y virtualmente en todos los dispositivos de Apple.
Pila de fuentes recomendadas
Font-family: Tahoma, Verdana, Segoe, sans-serif.
30. Trebuchet MS
Trebuchet MS es otra fuente sin serifas desarrollada por Microsoft. Fue una de las fuentes originales incluidas en el núcleo del paquete web de Microsoft. Todavía es soportada por virtualmente todos los dispositivos de Microsoft y Apple. Las letras son más delgadas que muchas otras fuentes sin serifas, lo que la convierte en una opción para los párrafos y el cuerpo del texto.
Pila de fuentes recomendadas
Font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif.
31. Verdana
Verdana, una fuente limpia sin serifas, es otro producto básico de Microsoft que existe desde 1996. El peso del trazo es bastante bajo para una sans serif, lo que hace que las letras sean delgadas y fáciles de leer. Puedes usarla tanto para el texto de los párrafos como para los titulares sin problemas. Es compatible con prácticamente todos los dispositivos de Apple y Windows.
Pila de fuentes recomendadas
Font-family: Verdana, Geneva, sans-serif.
Fuentes cursivas seguras para la web
Si quieres usar una fuente cursiva segura para la web, no tienes demasiadas opciones para elegir. En concreto:
- Segoe script
- Rage
- Script MT
- Snell Roundhand
- Lucida Handwriting
No hay ninguna fuente cursiva que sea universalmente compatible con los dispositivos de Apple y Microsoft. Debes considerar que usar una fuente cursiva para el cuerpo del texto puede no ser una gran idea, ya que la legibilidad es una gran parte de la usabilidad del sitio web.
Siempre debes utilizar un texto muy legible para tus párrafos, de lo contrario, los visitantes con problemas de visión tendrán dificultades para leer el texto de tu sitio. Esto puede llevar a altas tasas de rebote y una falta general de compromiso con tu contenido.
Fuentes Sans Serif seguras de la Web
Sans significa «sin» en francés, por lo que sans serif significa esencialmente «sin serifa». Una serifa es una línea o un trazo añadido a un trazo más largo en una letra. Por ejemplo, las pequeñas líneas verticales bajo el trazo superior en una «T» mayúscula, común en los titulares de periódicos o revistas. Las fuentes sin serifas son las más comunes y populares en la web, así que tienes muchas opciones para elegir:
- Arial
- Calibri
- Candara
- Century Gothic
- Consolas
- Dejavu Sans
- Franklin Gothic
- Gill Sans
- Helvetica
- Lucida Sans
- MS Sans Serif
- Neue Helvetica
- Optima
- Segoe UI
- Tahoma
- Trebuchet MS
- Verdana
¿Dónde se pueden descargar las fuentes seguras para la web?
Lo bueno de las fuentes seguras en la web es que no tienes que preocuparte por descargarlas. Ya están soportadas por el sistema operativo de cada visitante, así que solo tienes que codificarlas con CSS. Si no sabes nada sobre HTML y CSS o sobre la codificación para la web, esto puede parecer un poco abrumador.
Pero créenos, no es tan difícil como podrías pensar que es. Te guiaremos a través del proceso paso a paso en nuestra siguiente sección.
Cómo añadir fuentes seguras para la web a tu sitio web de WordPress
Si tienes un sitio de WordPress con el último tema de Twenty Twenty, puedes editar las fuentes HTML añadiendo CSS personalizado en el personalizador de WordPress.
Accede a él haciendo clic en el enlace Apariencia > Personalizar en el menú, y luego expandiendo la pestaña adicional de CSS.
Luego debes usar las Herramientas de Desarrollo de Chrome (o una herramienta similar para otro navegador) para identificar los selectores del texto que quieres cambiar.
Por ejemplo, puedes inspeccionar el titular de tu entrada en el blog:
Podemos ver que el tema utiliza el selector estándar de «entry-title» para el titular. También puedes buscar el atributo «font-family» para ver cómo el tema está estilizando el texto, y a qué nivel.
Dado que Twenty Twenty no utiliza una fuente específica para los titulares, puedes modificar fácilmente la fuente del titular apuntando al selector «font-family».
Por ejemplo, si queremos cambiar el titular por la fuente Impact, podemos usar el siguiente código:
h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }Simplemente añádelo al CSS adicional y haz clic en «Publicar» para impulsar tus cambios en vivo.
Cubrimos esto y mucho más en nuestra guía sobre cómo cambiar las fuentes en WordPress Si construiste tu sitio web usando HTML y CSS, puedes editar las fuentes directamente en el código fuente.
Por ejemplo, si utilizas la etiqueta style en los documentos HTML para aplicar el código CSS a cada página, puedes editar el atributo font-family allí.
Si quieres cambiar la fuente de todo el texto de la página, debes apuntar al selector de «body». Si quieres cambiar la fuente para un texto específico, debes usar un selector específico.
Si usaste una plantilla para construir tu sitio web, lo más probable es que tu CSS esté ubicado en una hoja de estilos separada. Esto es genial porque significa que puedes cambiar la fuente de todo tu sitio editando un solo archivo.
En ese caso, necesitas encontrar tu archivo de hoja de estilo (típicamente llamado style.css o alguna variación de ese). Luego necesitas encontrar la sección que controla las fuentes y los tipos de letra de tu sitio.
Normalmente, esto se hace hacia arriba. Si no, puedes buscar «font-family» usando el editor de código de tu elección.
Resumen
Al igual que con los temas y los plugins, no hay escasez de opciones para ti cuando se trata de ideas de fuentes.
Con una variedad de fuentes serif, sans serif, monoespacio e incluso cursivas disponibles de forma gratuita, las fuentes seguras para la web son un gran lugar para empezar a crear un sitio.
Las fuentes perfectas hacen que tu marca destaque, mejoran la legibilidad y respaldan tu mensaje. ¡Elige con sabiduría!
Si te ha gustado este post, echa un vistazo a nuestra guía de las 50 mejores Fuentes Retro para darle a tu sitio web o proyecto de diseño gráfico un toque nostálgico.
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta