Probablemente hayas oído que Google tiene cientos de fuentes web gratuitas listas para usar en tu próximo proyecto. Pero ¿cómo usar Google Fonts en tu sitio web? Este artículo te guiará paso a paso para que funcionen en tu sitio web. ¡No te llevará más de 10 minutos!
¿Qué son las fuentes de Google Fonts?
“Google Fonts se lanzó por primera vez en 2010 como una iniciativa de ingeniería para impulsar la web y hacerla más rápida”. — Diseño de Google
Google Fonts se lanzó en 2010 y rápidamente se convirtió en la mayor selección de fuentes gratuitas y de código abierto de internet. Todas las fuentes de Google son gratuitas para uso comercial y personal. El sitio web de Google Fonts facilita la selección y el uso rápido de diferentes fuentes para sus propias necesidades de diseño.
¿Quién utiliza Google Fonts?
¡Todos lo hacen! Diseñadores gráficos, diseñadores de UX, investigadores, desarrolladores, diseñadores web, blogueros, gestores de redes sociales, emprendedores, artistas, estudiantes, profesores, fotógrafos y muchos más. He visto fuentes de Google utilizadas en vallas publicitarias, pósteres, presentaciones, invitaciones de boda, sitios web y libros.
¿Quién crea las fuentes?
Google Fonts colabora con diseñadores tipográficos, fundiciones tipográficas y la comunidad de diseño de todo el mundo. Estas personas y organizaciones diseñan las fuentes que ves en Google Fonts. Por ejemplo, Łukasz Dziedzic es un diseñador tipográfico independiente que diseñó la popular tipografía Lato . Una fundición tipográfica llamada ParaType diseñó la tipografía PT Serif .
¿Por qué a Google le importan las fuentes?
Cada enlace de la API de Google Fonts en un sitio web le da a Google la oportunidad de realizar más minería de datos. ¿Suena desagradable? Sí, pero no creo que deba impedirte usar Google Fonts.
Otra razón aún más reconfortante por la que Google se preocupa por las fuentes es porque quieren que las fuentes web de código abierto sean accesibles para el público en general. Quieren crear una web más rápida, atractiva y fácil de navegar y usar. También lanzaron Google Fonts en 2010, cuando un servicio como este era muy necesario, lo que resolvió otro problema que teníamos en internet. #dontbeevil
¿Por qué debería considerar usarlos?
Lo gratis es insuperable. ¿Verdad? Además de ser gratis, deberías considerar usar 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 para elegir (y la cifra sigue aumentando)
- La calidad general de las fuentes continúa mejorando
- Las fuentes de Google también se pueden descargar para imprimir.
¡Bueno, bueno, bueno! Ahora veamos cómo se usan.
Cómo usar las fuentes de Google: paso a paso
1) Vaya al sitio web de Google
Visita el sitio web de Google Fonts, donde podrás elegir entre 853 familias de fuentes, ¡y la cifra sigue aumentando! El sitio web te permite filtrar los resultados por estilo de fuente, idioma, popularidad y grosor. Google Fonts también incluye nuevas fuentes si visitas la página «Destacadas» .
2) Busca fuentes que te gusten
Si tienes un nombre de familia de fuentes en mente, puedes buscarlo.
3) Haga clic en “+” cuando esté listo para usarlo
Cada familia de fuentes tiene un botón con el símbolo «+» en la esquina superior derecha. Haga clic en él para añadir la familia de fuentes al menú de selección que aparece en la parte inferior de la pantalla.
4) Repita los pasos 1 a 3 si busca más de una fuente para usar.
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. Aquí encontrarás el código para añadirlas a tu sitio web. También puedes descargar las fuentes a tu escritorio.
6) El “cajón de selección” es donde tomarás el código que copiarás y pegarás en el código HTML y CSS de tu sitio web.
Desde el panel de selección, copia el código para pegarlo en tu HTML y CSS. Para que Google Fonts funcione en tu sitio web, debes tener la familia de fuentes vinculada a la API de Google Fonts (en el HTML) y especificada (en el CSS).
7) Agregue diferentes pesos y estilos de fuente si lo desea haciendo clic en la pestaña «personalizar».
Esta es tu última oportunidad para añadir diferentes grosores y estilos de fuente a tus familias tipográficas antes de añadirlas a tu sitio web. Añade solo los grosores y estilos que sabes que necesitarás, ya que cuantas más fuentes añadas, más lento se cargarán en tu sitio.
8) Copia el código HTML y pégalo en el directorio de tu sitio web.
¡Ya casi terminamos! Solo nos queda copiar y pegar el código HTML y CSS en tu sitio web. Primero, copia el enlace HTML en el encabezado de tu documento HTML.
9) Copia la regla CSS y pégala en el archivo CSS de tu sitio web
Finalmente, también necesitamos copiar y pegar las reglas CSS en tu archivo CSS. Si añades una fuente de Google a tu sitio web, puedes añadir las reglas de la familia de fuentes CSS en la etiqueta del cuerpo. De lo contrario, tendrás que asegurarte de añadirlas a los elementos correctos de tus archivos CSS.
10) Guarde ambos archivos (HTML y CSS), luego actualice su sitio web y vea la nueva fuente.
¡No olvides guardar y actualizar!
¡Listo! Has implementado con éxito tu primera fuente de Google en tu sitio web. ¡Felicidades, programador! Se puede decir que las fuentes de Google son básicamente…
