Google Fonts, seguramente habrás oído que Google tiene cientos de fuentes web gratuitas listas para ser utilizadas en tu próximo proyecto. Pero, ¿cómo utilizarlas en tu sitio web?
Este artículo te guiará a través de los pasos que debes seguir para ponerlas en marcha en tu sitio web. Te llevará menos de 10 minutos.
¿Qué son las fuentes de Google?
Google Fonts se lanzó por primera vez en 2010 como una iniciativa de ingeniería para hacer avanzar la web y hacerla más rápida»
Google Fonts se lanzó en 2010, convirtiéndose rápidamente en la mayor selección de fuentes gratuitas y de código abierto de Internet. Todas las Google Fonts son gratuitas para uso comercial y personal. El sitio web de Google Fonts facilita a cualquiera la selección y utilización rápida de diferentes fuentes para sus propias necesidades de diseño.
¿Quién utiliza Google Fonts?
Todo el mundo. Diseñadores gráficos, diseñadores UX, investigadores, desarrolladores, diseñadores web, blogueros, gestores de redes sociales, empresarios, artistas, estudiantes, profesores, fotógrafos y muchos más. He visto utilizar Google Fonts en vallas publicitarias, carteles, presentaciones, invitaciones de boda, sitios web y libros.
¿Quién crea las fuentes de Google?
Google Fonts colabora con diseñadores tipográficos, fundiciones tipográficas y la comunidad de diseñadores de todo el mundo. Estas personas y organizaciones diseñan las fuentes que se ven en Google Fonts.
Por ejemplo, Łukasz Dziedzic es un diseñador tipográfico independiente que diseñó el popular tipo de letra Lato. Una fundición tipográfica llamada ParaType diseñó el tipo de letra PT Serif.
¿Por qué se preocupa Google por las fuentes?
Cada enlace de la API de Google Fonts en un sitio web da a Google la oportunidad de hacer más minería de datos. ¿Suena asqueroso? Sí, pero no creo que deba impedirte usar Google Fonts.
Otra razón más reconfortante por la que Google se preocupa por las fuentes es porque quiere hacer que las fuentes web de código abierto sean accesibles para las masas.
Quieren hacer una web más rápida, más bonita y más fácil de navegar y utilizar. También pusieron en marcha Google Fonts en 2010, cuando un servicio como este era muy necesario, por lo que resolvieron otro problema que teníamos en Internet. #dontbeevil
¿Por qué debería considerar el uso de Google fonts?
No hay nada mejor que lo gratuito. ¿Estoy en lo cierto? Además de ser gratis, deberías considerar el uso de Google Fonts en tu próximo proyecto de diseño web porque…
- Las fuentes son fáciles de implementar en su sitio web
- Hay más de 850 fuentes entre las que elegir (y siguen aumentando)
- La calidad general de las fuentes sigue aumentando
- Las fuentes de Google también se pueden descargar para su uso en la impresión
- ¡Bien, bien, bien! Ahora pasemos a cómo utilizarlas.
Cómo utilizar Google Fonts – Paso a paso
1) Vaya al sitio web de Google Fonts
Visite el sitio web de Google Fonts, donde podrá elegir entre 853 familias de fuentes y más.
El sitio web le permite filtrar los resultados por estilo de fuente, idiomas, popularidad y peso. Google Fonts también presenta nuevas fuentes si visitas la página de «destacados».
2) Busca las fuentes que te gustan
Si tienes un nombre de familia de fuentes en mente, puedes buscarlo.
3) Haz clic en «+» para añadir las que te gusten
Cada familia de fuentes tiene un botón «+» en la esquina superior derecha. Haga clic en el botón «+» para añadir la familia de fuentes al «cajón de selección» que aparece en la parte inferior de la pantalla.
4) Repita los pasos 1 a 3 si busca más de un tipo de letra para utilizar.
5) Haga clic en el «cajón de selección» para mostrar todas las fuentes que ha elegido
El «cajón de selección» es donde verás todas las fuentes que has añadido. Es donde encontrarás el código para añadir a tu sitio web. También tienes la opción de descargar las fuentes en tu escritorio.
6) El «cajón de selección» es el lugar donde cogerás el código que copiarás/pegarás en el código HTML y CSS de tu sitio web
Desde el «cajón de selección», copiará el código que pegará en su HTML y CSS. Para que Google Fonts funcione en su sitio web, debe tener tanto la familia de fuentes vinculada a la API de Google Fonts (en el HTML) como la familia de fuentes especificada (en el CSS).
7) Añade diferentes pesos y estilos de fuente si lo deseas haciendo clic en la pestaña «personalizar».
Esta es su última oportunidad para añadir diferentes pesos y estilos de fuente a sus familias de fuentes antes de añadirlas a su sitio web. Añade sólo los pesos y estilos de fuente que sepas que vas a necesitar, porque cuantas más fuentes añadas más lento se cargarán en tu sitio.
8) Copie el código HTML y péguelo en el de su sitio web.
Ya casi hemos terminado. Todo lo que tenemos que hacer ahora es copiar y pegar el código HTML y CSS en su sitio web. Primero, copie el enlace HTML en el encabezado de su documento HTML.
9) Copia la regla CSS y pégala en el archivo CSS de tu sitio web
Por último, también tenemos que copiar y pegar las reglas CSS en tu archivo CSS. Si vas a añadir una fuente de Google para tu sitio web, puedes añadir las reglas CSS de la familia de fuentes en la etiqueta body. De lo contrario, tendrás que asegurarte de que las añades a los elementos correctos en tus archivos CSS.
10) Guarda ambos archivos (HTML y CSS) y luego actualiza tu sitio web para ver la nueva fuente
No olvides guardar y actualizar.
Actualiza tus archivos locales y deberías ver la nueva familia de fuentes… en este caso es una fuente de Google llamada Lato.
¡Ya está! Has implementado con éxito tu primera Google Font en tu sitio web. Felicidades, codificador. Es justo decir que las Google Fonts son básicamente.
¿Por qué son tan importantes las fuentes?
A la hora de diseñar un sitio web, puede ser fácil conformarse con las fuentes predeterminadas y centrarse en otras decisiones aparentemente más importantes.
Esto no sólo sería un error, sino que se estaría perdiendo el poder de las fuentes y los beneficios que pueden aportar a su sitio. He aquí algunos ejemplos de cómo la elección de las fuentes adecuadas puede beneficiar a su sitio web.
Las fuentes ayudan a crear la marca
Elegir el tipo de letra adecuado para su sitio web puede suponer una gran diferencia para su imagen de marca. Desde el logotipo hasta los números, pasando por el microcopy, la elección de la fuente establece una especie de comunicación no verbal con el lector.
Debido a la forma en que nuestros ojos responden inconscientemente a las señales visuales (escribimos más sobre esto cuando hablamos de storytelling y UX), las fuentes de tu sitio web pueden impactar en la impresión inmediata de tu marca por parte de tu lector.
Si eliges los tipos de letra adecuados, comunicarás con éxito los valores y las intenciones de tu marca. Si eliges los tipos de letra equivocados, corres el riesgo de que haya una desconexión entre lo que dices de tu marca y lo que tu marca dice de sí misma.
Piense en lo que quiere comunicar con su marca: ¿es lujosa y digna de confianza, gruesa y honesta, o fresca y fresca? – y elige fuentes que ayuden a comunicar ese mensaje.
Las fuentes son vitales para la UX
La tipografía es uno de los aspectos más críticos del diseño UX. La elección de un tipo de letra incorrecto para el texto o la navegación puede hacer que el texto sea ilegible y el sitio web inutilizable.
- ¿Cuántos pesos tiene la fuente?
- ¿Es buena la legibilidad debido a la altura x?
- ¿Esta fuente se adapta bien a varios dispositivos?
- ¿Es accesible?
- ¿Cuál es su relación de contraste?
Si la fuente elegida tiene una gama decente de pesos, cumple las normas de accesibilidad, altura x y relación de contraste y puede leerse fácilmente en cualquier dispositivo, probablemente sea una apuesta segura.
Recuerde: sólo porque usted, un diseñador experto y muy atractivo, prefiera un tipo de letra, no significa que sea la elección correcta para su sitio web.
Una vez que se haya decidido por un tipo de letra, siempre merece la pena realizar algunas pruebas con los usuarios para ver cómo responden los lectores a sus elecciones tipográficas.
Terminología tipográfica explicada
Todos los campos técnicos tienen su cuota de jerga y la tipografía, por decirlo suavemente, no es diferente. A continuación, le ofrecemos un resumen de los términos más importantes que puede encontrar al investigar sobre fuentes, y su significado.
Serif fonts y sans-serif fonts.
Serif fonts se llaman así porque sus letras presentan serif, pequeñas líneas o trazos unidos al final de la parte principal de la letra. serif, tienen su origen en la talla romana de la piedra, y se cree que están relacionadas con la forma en que se pintaban las palabras en la piedra antes de tallarlas. Por ello, los tipos de letra con gracias se denominan a veces «romans». Garamond y Times New Roman son dos tipos de letra con gracias clásicos.
Sans-serif fonts. de estilo antiguo, de transición, modernas y de placa.
Las fuentes sin gracias son, como es lógico, fuentes que no utilizan gracias. Suelen tener un aspecto más minimalista y moderno, y se basan en los tipos de letra de publicidad y señalización de finales del siglo XIX y principios del XX. En contraste con las fuentes con serifas, las fuentes sin serifas se denominan a veces «góticas».
La Helvética es probablemente la más famosa de las fuentes Sans-serif fonts .Entre Sans-serif fonts se encuentran grotesque, neo-grotesque, geometric and humanist..
Es posible que leas que una determinada fuente de Google está destinada a ser utilizada para la visualización o para el texto, pero ¿cuál es la diferencia entre ambas categorías?
Text fonts están diseñadas para ser utilizadas en el texto principal de un sitio web o una aplicación, y deben ser muy legibles, incluso en tamaños pequeños. Las fuentes de texto suelen ser limpias, tienen un espacio más amplio y son menos voluminosas que las fuentes de pantalla, lo que significa que funcionan mejor en tamaños pequeños.
Por otro lado, display fonts están diseñadas principalmente para tener un aspecto elegante y original en los títulos, añadiendo personalidad y fuerza, con una legibilidad ligeramente reducida que las haría menos ideales para su uso en el cuerpo del texto.
Ventajas de utilizar Google Fonts en su web
Google Fonts es una colección de 915 fuentes, todas ellas disponibles para su uso gratuito en su sitio web. Todo lo que tienes que hacer es incluir una llamada a las fuentes que quieres usar en tu HTML y ya está.
Estas son algunas de las ventajas de utilizar Google Fonts en tu sitio web:
- Mejora la apariencia de tu sitio web de forma gratuita : Google Fonts te da acceso a casi un millar de fuentes (en su mayoría) de gran calidad de forma gratuita, dándote la libertad de elegir entre toda una gama de tipos de letra de calidad profesional. Hace tan sólo unos años, una selección equivalente podría haberte costado miles de dólares.
- Aumentar la coherencia en todas las plataformas: Gracias a que la gran mayoría de los navegadores web actuales son compatibles con Google Fonts, incluidos Google Chrome, Apple Safari, Mozilla Firefox, Opera e Internet Explorer
- Acelere su sitio, y también Internet: El uso de Google Fonts en su sitio web puede hacer que su sitio tenga un aspecto excelente y aumentar su rendimiento. Vea este vídeo de Google que explica cómo hacerlo.
30 de las mejores Google fonts para su sitio web
Lato
El diseñador de Varsovia, Łukasz Dziedzic, creó Lato para que funcione de forma transparente en el cuerpo del texto y también para que destaque individualmente cuando se utilice en títulos de mayor tamaño.
Esta familia tipográfica sin gracias resulta familiar y diferente a la vez, sobre todo por la forma en que se redondean algunos detalles de la fuente.
Abhaya Libre
Esta fuente de Google es de una elegancia clásica con sus formas redondeadas y bordes suaves. Abhaya Libre es una gran fuente de cabecera dramática, que mantiene una gran legibilidad en cuerpos grandes.
Dicho esto, puede que no sea la mejor opción para párrafos largos en cuerpos pequeños, que pueden resultar cansinos para la vista después de un rato.
Merriweather
Merriweather, de Eben Sorkin, está diseñada para una óptima legibilidad en pantallas. La gran altura x de Merriweather aumenta la legibilidad de la fuente, lo que la hace idónea para utilizarla en textos largos, así como en titulares y títulos. Merriweather tiene actualmente 8 estilos: Light, Regular, Bold, Black, Light Italic, Italic, Bold Italic, Black Italic.
Alegreya
Esta fuente de Google es muy versátil y se remonta a los viejos tiempos de la prensa escrita en cuanto a formas. No en vano, este tipo de letra ofrece una buena legibilidad para textos largos en cuerpos grandes o pequeños.
Nos encanta que Google ofrezca tantos estilos para Alegreya, lo que la convierte en una fuente de muchas caras: desde la Regular 400 hasta los estilos de negrita 800.
Montserrat
Fundada a partir de un proyecto de Kickstarter en 2011, Montserrat pretende «rescatar la belleza de la tipografía urbana surgida en la primera mitad del siglo XX».
Esta atractiva familia tipográfica sans serif fue creada por Julieta Ulanovsky, y lleva el nombre del barrio de Montserrat en Buenos Aires, donde ella vive.
Aleo
Este tipo de letra con gracias ofrece una experiencia moderna que respeta los estándares clásicos de usabilidad. Realizada en estrecha relación con otra fuente de Google que conocemos y amamos, Lato, esta fuente también es equilibrada y moderna.
Con formas semirredondas y curvas, Aleo es una fuente amigable que funciona muy bien para textos largos.
Muli
Muli es una fuente sans-serif versátil y minimalista que fue diseñada por el difunto Vernon Adams. Se diseñó originalmente para ser utilizada como fuente de visualización, pero gracias a su espaciado, puede funcionar bien también como fuente de texto.
Adecuada para aplicaciones web y móviles, Muli también luce una ‘a’ minúscula de un solo piso, una relativa rareza que es más una curiosidad que otra cosa.
Arapey
Arapey no ofrece demasiados estilos diferentes, pero sigue siendo una maravillosa fuente de Google. El tipo de letra tiene una estructura moderna, pero sigue disfrutando de líneas suaves que hacen que sea una gran manera de resaltar el contenido.
A nuestros diseñadores les encanta esta fuente por su estilo cursivo, que es bastante suave y añade cierto glamour a cualquier contenido.
Nunito
Otra creación de Vernon Adams, Nunito es una fuente sans-serif diseñada como fuente de visualización.
Con 8 pesos diferentes disponibles, es una fuente versátil y atractiva que recomendamos utilizar cuando se desee un encabezado sans-serif elegante y con estilo.
Asap Condensed
Asap Condensed viene con 8 estilos, incluyendo semibold, bold y todas sus respectivas cursivas. Es una fuente de Google muy práctica gracias a su anchura de caracteres estandarizada, que facilita el cambio de estilos sin tener que ajustar el texto.
Es una buena tipografía condensada que puede sacar el máximo partido a los encabezados y títulos.
Asistente
Esta es otra fuente de Google muy versátil. Assistant es un tipo de letra limpio y ofrece una generosa cantidad de 6 estilos, desde extra claro hasta negrita.
El cuidadoso espaciado entre las letras crea una fuente de gran legibilidad. Esto, combinado con los abundantes estilos de negrita, hace que Assistant sea especialmente buena para cuerpos grandes.
Open Sans
Open Sans, una de las fuentes más populares de Google, es una fuente sans-serif abierta y gratuita que puede utilizarse prácticamente en cualquier escenario.
Notablemente versátil, verás que combina bien como fuente de texto con casi todas las demás fuentes de este listado, gracias a un diseño sencillo y amigable. Open Sans fue creada por Steve Matteson y está optimizada para usos impresos, web y móviles.
Barlow
Barlow se creó con el objetivo de reflejar el estilo general del estado de California. Esta fuente de Google comparte rasgos y formas comunes con las matrículas, las señales de tráfico y los trenes del estado.
Aparte de sus curiosas raíces visuales, Barlow aporta delicadas formas redondeadas y ofrece un bajo contraste. También tiene una buena legibilidad, así como 9 estilos para elegir.
Oswald
La fuente Oswald, de Vernon Adams, es una reelaboración de la clásica familia tipográfica «Alternate Gothic» de principios del siglo XX y está diseñada para su uso digital en ordenadores y dispositivos móviles.
Utilízala para títulos o citas que deban sobresalir en espacios con limitaciones de tamaño.
Bitter
Bitter es una fuente popular de Google, por su gran legibilidad para textos largos. Sol Matas, la diseñadora que nos trae esta maravillosa fuente, dice que la inspiración detrás de esta fuente fue un humilde y robusto píxel.
A partir de ahí, Bitter evolucionó hasta convertirse en una herramienta versátil con estilos que van desde la extra light 200 hasta la 900 bold.
Poppins
Poppins, creada por la Indian Type Foundry, es una atractiva fuente geométrica sin gracias para usar en contextos de texto o de visualización.
También es la primera fuente de nuestra lista que soporta el sistema Devanagari, que se utiliza en más de 150 idiomas, incluyendo el hindi y el sánscrito.
Brawler
Pensada originalmente para periódicos y tabloides, Brawler es un ejemplo clásico de fuentes que mantienen un estilo de la vieja escuela que sigue gustando a las multitudes hoy en día.
Con sus bordes afilados y su sensación de robustez, es una fuente de Google que puede añadir elegancia a cualquier diseño. No viene con diferentes estilos, pero sigue siendo una fuente maravillosa que puede tener un verdadero impacto en el usuario. ¿Y lo mejor? Brawler ofrece una gran legibilidad en cuerpos pequeños.
Roboto
La fuente Roboto de Google es la más descargada en el sitio web de Google Fonts, y no es difícil ver por qué. Limpia, elegante e inteligente a la vez que profesional y amigable,
Roboto es la fuente por defecto para Android y Chrome OS, y es la fuente elegida en el sistema Material Design de Google. Roboto es simple y altamente legible, para usos web y móviles.
Caladea
Caladea es una fuente de Google moderna y amigable. Creada a partir de Cambo, Caladea ofrece 4 estilos diferentes para elegir. La fuente es práctica no sólo en el sentido de que tiene estilos para resaltar el contenido, sino también por su fiable legibilidad.
Caladea funciona tanto para títulos grandes y dramáticos como para textos pequeños que no abrumen a los lectores.
ROKKITT
Para algo completamente diferente, no busque más que Rokkitt. Diseñada por Vernon Adams, Rokkitt se inspira en las llamadas fuentes geométricas «egipcias» con gracias de mediados del siglo XIX.
Está claro que está pensada más para fines de visualización, pero sigue funcionando bien en usos de texto.
Carme
Carme es una fuente de Google que ofrece unos efectos visuales limpios, con un resultado dramático pero aún legible. Diseñada específicamente para párrafos largos de texto, Carme es una buena opción para aquellos que buscan ofrecer mucho contenido escrito.
La fuente no viene con ningún estilo, pero la negrita se lanzará pronto.
Rubik
Rubik es una fuente sans serif diseñada por Philipp Hubert y Sebastian Fischer en Hubert Fischer, con una variante hebrea revisada y mantenida por Meir Sadan.
Las esquinas redondeadas de Rubik le confieren una sensación agradable y amistosa. Se adapta perfectamente a un uso de pantalla o de texto.
Encode Sans Semi Condensed
Encode Sans Semi Condensed es una fuente de Google que nuestros diseñadores adoran para los títulos grandes. La fuente viene con muchos estilos diferentes, desde Thin 100 hasta Black 900, lo que la convierte en una fuente práctica para tener a mano.
Encode Sans Semi Condensed es la fuente perfecta para encabezados grandes y dramáticos y funciona bien para resaltar el contenido.
Enriqueta
Enriqueta es una fuente de Google que también aporta cierto glamour a cualquier página, pero es especial a su manera. Esta fuente tiene unos rasgos audaces que recordaron a nuestro equipo a los viejos tiempos, añadiendo una especie de onda Rockwell a la página.
¿Y lo mejor? Enriqueta está muy bien equilibrada, y aunque tiene un fuerte aspecto visual, sigue ofreciendo una gran legibilidad, ¡incluso en cuerpos muy pequeños!
Source Sans Pro
Diseñada por Paul D. Hunt, Source Sans Pro es la primera familia tipográfica de código abierto de Adobe. Es un tipo de letra sans-serif que está realmente pensado para su uso en elementos de interfaz de usuario, peroque también funciona bien para textos más largos, gracias a su anchura, más alta de lo normal.
Frank Ruhl Libre
Frank Ruhl Libre se hizo con la intención de ser única, y ciertamente lo consigue. Se trata de una fuente condensada que consigue diferenciarse de todas las demás de esta lista gracias a sus visuales fuertes pero no abrumadoras y a sus interesantes proporciones.
Nos encanta el reducido contraste entre los trazos finos y anchos de una letra a otra, lo que la convierte en un buen tipo de letra que sigue ofreciendo una buena legibilidad.
Spectral
Spectral es un tipo de letra con gracias encargado por Google para su uso en sus aplicaciones web Docs y Slides. Elegante, moderna y hermosa, Spectral se adapta a los títulos y a las citas, así como al cuerpo del texto. Combínala con una fuente sans serif como Open Sans para obtener los mejores resultados.
Work Sans
Diseñada por Wei Huang, Work Sans se basa en las grotescas (la inspiración de todas las fuentes sin gracias) de principios del siglo XX. Sus diferentes pesos están diseñados para diferentes usos – los pesos regulares y medios están dirigidos a usos de texto, mientras que los pesos más pesados y ligeros están optimizados para fines de visualización.
Gelasio
Gelasio es una maravillosa fuente de Google que apuesta por la versatilidad y la practicidad.
La fuente viene con 8 estilos, que van desde la regular 400 hasta la negrita 700. A nuestros diseñadores les encanta Gelasio porque ofrece una gran legibilidad, tanto para párrafos largos en cuerpos pequeños como para títulos grandes y llamativos o contenido destacado.
Headland One
Headland One es una gran fuente de Google para cuerpos pequeños. La fuente en sí tiene formas que son clásicas y al mismo tiempo tiene detalles excéntricos que dan una sensación única a los lectores, especialmente cuando se utiliza en tamaño pequeño en párrafos largos.
Headland One no viene con ningún estilo diferente para aplicar, pero la fuente en sí es lo suficientemente distintiva como para ser utilizada también en encabezados y títulos.
Conclusión
Las fuentes de Google son un recurso increíblemente potente y versátil para su sitio web. Al darle acceso a más de 900 fuentes, Google Fonts puede hacer que su sitio web tenga un mejor aspecto, a la vez que aumenta su rendimiento y mejora la velocidad general de Internet.
Y lo que es mejor, Google hace que sea fácil empezar a utilizar Google Fonts en tu sitio web.
Integre Google Fonts en su sitio web ahora
