Una guía para la API de fuentes de Google
Publicado: 2021-08-03Los diseñadores web se regocijan a medida que la web se vuelve más agradable desde el punto de vista estético debido a los recientes avances en la tecnología de fuentes.
Todo esto es gracias a algo llamado fuentes web, que son una colección de herramientas que se pueden usar para incrustar fuentes en páginas web. Son una herramienta importante para los desarrolladores, ya que les permite crear sitios web únicos y atractivos. ¡Ya no estamos obligados a usar Ariel o Times New Roman para cada proyecto web!
La siguiente guía le dará una visión en profundidad de cómo utilizar la API de fuentes de Google como una forma de implementar fuentes web. El recurso es gratuito y fácil para cualquier persona con acceso a Internet, por lo que vale la pena aprovechar esta gran herramienta.
Una guía para la API de fuentes de Google
Google Font API es una colección de herramientas que se pueden utilizar para incrustar fuentes en páginas web. Es una herramienta importante para los desarrolladores, ya que les permite crear sitios web únicos y atractivos. Las fuentes de Google son una forma rápida y fácil de agregar fuentes a su sitio sin tener que realizar ninguna programación complicada. Simplemente ingrese una cadena de texto y elija la fuente que desea usar, luego, ¡listo! Al instante, su sitio web se actualiza con una hermosa tipografía.
Ventajas de utilizar la API de fuentes de Google
Si desea utilizar la API de fuentes de Google, tiene una serie de funciones muy útiles.
Siga usando texto HTML
La tipografía web es un esfuerzo serio y cada vez es más difícil lograr el equilibrio perfecto entre estética y optimización de motores de búsqueda. ¡Afortunadamente, @ font-face puede ayudar! A diferencia del uso de imágenes o el reemplazo de imágenes de fondo CSS como soluciones para una tipografía web más bonita, los investigadores de Google han demostrado que este método es compatible con SEO.
Accesible desde la Web
A diferencia de las imágenes CSS, los lectores de pantalla pueden leer el texto HTML, por lo que no afectará a las personas que lo utilicen.
Rápido y Fácil
Todo lo que necesita hacer es hacer referencia a la fuente de su contenido y luego agregar algunas configuraciones de CSS sobre cómo debería aparecer en la pantalla. Una vez configurados, estos códigos también son fáciles de cambiar. La API de fuentes de Google se ocupa de las peculiaridades de los navegadores web, maneja múltiples tipos de archivos y facilita la comprensión de @ font-face.
Gratis para usar
Las fuentes de Google son de uso gratuito y han sido respaldadas por Google. Esto significa que puede diseñar su sitio web con confianza sin riesgo de meterse en problemas por usar una fuente que no debería.
Esto es bueno porque mantendrá bajo el costo total de su sitio web. Si tiene curiosidad sobre cuánto podría costar un sitio web típico, consulte nuestro artículo de blog ¿Cuánto costará mi sitio web para ver qué tipo de presupuesto necesitará para tener su sitio web perfecto!
Rápido y confiable
Cuando su navegador carga una página web, verificará la memoria caché del usuario para ver si tiene fuentes que se utilizan en otros sitios. Si es así, esto acelera los tiempos de carga de las páginas porque la fuente ya estará disponible en su caché web y no necesitará cargarse desde el servidor nuevamente.
Una gran elección
Con más de 850 fuentes diferentes a su alcance, podrá encontrar la fuente perfecta para su último proyecto. Puede utilizar el directorio de fuentes de Google para realizar una búsqueda rápida y sin complicaciones.
¡El uso de la API de Google Fonts puede ser un gran indicador de un sitio web cuidadosamente construido! Más allá de eso, tenemos una lista de otras 10 características del diseño web de alta gama que es posible que desee emular en su sitio web.
¿Cómo utilizar la API de fuentes de Google?
Para usar fuentes de Google en su documento HTML, primero debe hacer referencia a la hoja de estilo CSS agregándola dentro de las etiquetas <head>. Asegúrese de que esta referencia esté incluida en todas las páginas en las que desea que aparezca la fuente. Con WordPress, puede hacer esto agregando la referencia a la plantilla del tema.
<title>Home Page</title> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName"> </head>Ahora es el momento de usar CSS para especificar cómo desea usar su nueva fuente. Usaría el siguiente código si desea que todos sus H1 tengan la fuente de Google:
h1 { font-family: 'FontName', serif; font-size: 12px; }¿Notaste que también incluí la fuente serif? He hecho esto porque es recomendable tener una fuente alternativa. Básicamente, significa que el navegador utilizará automáticamente la fuente serif si hay algún problema con la fuente de Google.
Herramientas de fuentes de Google
La plataforma de fuentes de Google ha creado muchas herramientas para facilitarle las cosas. Puede utilizar Font Directory, Previewer y Web Font Loader, todos controlados por la API de Google. A continuación, brindaremos una descripción general de cada herramienta en detalle para que cualquier persona apasionada por las fuentes pueda comenzar.
Directorio de fuentes de Google
Con tantas fuentes para elegir, puede resultar difícil encontrar la perfecta para su proyecto. Afortunadamente, Google ha compilado una lista de todas sus fuentes en un directorio de fácil acceso donde puede comenzar a elegir la fuente adecuada para usted. Al hacer clic en la pestaña "Obtener código", se le mostrará una lista de códigos que se pueden copiar y pegar para que esta fuente funcione.
Vista previa de fuentes de Google
Con Google Font Previewer, puede ver cómo se ve cada fuente y modificarla a su gusto. ¡Tiene una variedad de opciones con tamaño, estilo (variante) y espaciado!
Cargador de fuentes web
Los desarrolladores web ahora pueden tener más control de sus fuentes de Google con la ayuda de una biblioteca de JavaScript. El desarrollador puede vincular un detector de eventos para cualquier etapa de la secuencia de carga de fuentes y agregar funcionalidad en función de lo que sucede en cada fase.
¿Quién crea las fuentes?
Google Fonts es un proyecto de código abierto que brinda a las personas la posibilidad de usar estas fuentes de forma gratuita. La variedad de tipos de fuentes disponibles en la actualidad se debe a la comunidad de diseño mundial de diseñadores tipográficos y fundiciones.
¿Qué hay para Google?
¡Google ama los datos! Los enlaces de la API de Google Fonts se pueden encontrar en muchos sitios web y cada uno de ellos representa una oportunidad para que Google extraiga más datos. Pero podemos estar agradecidos de que su trabajo haya resuelto otro problema para los usuarios de Internet.
Conclusión
En conclusión, Google Font API es una herramienta poderosa para desarrolladores y diseñadores que puede ayudar a crear sitios web únicos y atractivos. También es fácil de usar, por lo que si está buscando agregar algo de variedad al diseño de su sitio web o experimentar con fuentes en su último proyecto, ¡le recomendamos que lo pruebe!