Probablemente hayas escuchado que Google tiene cientos de fuentes web gratuitas listas para usar en tu próximo proyecto. Pero, ¿cómo los usa en su sitio web? Este artículo lo guiará a través de los pasos a seguir para que se ejecuten en su sitio web. ¡Debería tomar 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 hacerlo más rápido". - Diseño de GoogleGoogle Fonts se lanzó en 2010, convirtiéndose rápidamente en la selección de fuentes de código abierto, gratuita y más grande de Internet. Todas las fuentes de Google son gratuitas para uso comercial y personal. El sitio web de Google Fonts hace que sea fácil para cualquiera seleccionar y utilizar rápidamente diferentes fuentes para sus propias necesidades de diseño.
¿Quién usa Google Fonts?
¡Todos lo hacen! Diseñadores gráficos, diseñadores de UX, investigadores, desarrolladores, diseñadores web, blogueros, administradores de redes sociales, emprendedores, artistas, estudiantes, profesores, fotógrafos y muchos más. He visto fuentes de Google utilizadas en vallas publicitarias, carteles, 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ñó el popular tipo de letra Lato. Una fundición tipográfica llamada ParaType diseñó la tipografía PT Serif.
¿Por qué Google se preocupa por 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 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 quieren hacer que las fuentes web de código abierto sean accesibles para las masas. Quieren hacer una web más rápida y hermosa que sea más fácil de navegar y usar. También comenzaron 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 su uso?
No puedes ser libre. Estoy en lo cierto? Además de ser gratis, debería considerar el uso de Google Fonts en su 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 contando)
- La calidad general de las fuentes sigue aumentando
- Las fuentes de Google también se pueden descargar para uso impreso
Vale, vale, vale! Ahora veamos cómo los usa.
Cómo utilizar las fuentes de Google: 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 contando. El sitio web le permite filtrar los resultados por estilo de fuente, idiomas, popularidad y peso. Google Fonts también presenta nuevas fuentes si visita la página de "destacados".
2) Busca las fuentes que te gusten
Si tiene un nombre de familia de fuentes en mente, puede buscarlo.
3) Haga clic en "+" cuando esté listo para usarlo
Cada familia de fuentes tiene un botón más en la esquina superior derecha. Haga clic en el botón más para agregar 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 está buscando 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á todas las fuentes que ha agregado. Es donde encontrará el código para agregar a su sitio web. También tiene la opción de descargar las fuentes a su escritorio.
6) El "cajón de selección" es donde tomará el código que copiará / pegará en el código HTML y CSS de su sitio web
Desde el "cajón de selección", copiará el código para pegarlo en su HTML y CSS. Para que Google Fonts funcione en su sitio web, debe tener la familia de fuentes vinculada a la API de Google Fonts (en el HTML) y debe tener la familia de fuentes especificada (en el CSS).
7) Agregue diferentes pesos y estilos de fuente si lo desea haciendo clic en la pestaña "personalizar"
Esta es su última oportunidad para agregar diferentes pesos y estilos de fuente a sus familias de fuentes antes de agregarlas a su sitio web. Solo agregue los pesos y estilos de fuente que sabe que necesitará, porque cuantas más fuentes agregue, más lentamente se cargarán en su sitio.
8) Copie el código HTML y péguelo en el
¡Muy bien, casi terminamos! 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) Copie la regla CSS y péguela en el archivo CSS de su sitio web
Finalmente, también necesitamos copiar y pegar las reglas CSS en su archivo CSS. Si está agregando una fuente de Google para su sitio web, puede agregar las reglas de la familia de fuentes CSS en su etiqueta de cuerpo. De lo contrario, deberá asegurarse de agregarlo a los elementos correctos en sus archivos CSS.
10) Guarde ambos archivos (HTML y CSS), luego actualice su sitio web y vea la nueva fuente
¡No olvide guardar y actualizar!
¡Ahí tienes! Ha implementado con éxito su primera fuente de Google en su sitio web. Felicidades, te codificas. Es justo decir que las fuentes de Google son básicamente ...
Más lectura
- "Reimaginar las fuentes de Google" de Yuin Chien (Diseño de Google)
- “6 consejos para un mejor emparejamiento de fuentes” de Hayden Mills (par de fuentes)
- "Elección de fuentes web: una guía para principiantes" de Google Fonts
Gracias por leer
No dude en dejar un comentario a continuación o comunicarse conmigo en Twitter con cualquier pregunta ✌️
Además, soy el creador de Font Pair, que te ayuda a emparejar Google Fonts. ¡Consulte nuestra nueva publicación Medium para leer más publicaciones de tipografía!
