93 318 54 36

Guía de Google Fonts: ¿Cómo elegir fuentes para tu sitio web?

25/05/2022
Elizabeth De León

Como habrás entendido, las fuentes de Google son una serie de caracteres contenidos en una biblioteca topográfica real, en concreto se trata de un conjunto de interfaces de programación de aplicaciones o más conocidas como APIs. En particular, permite a todos los usuarios utilizar fuentes web en su propia aplicación o sitio web . En particular, se pueden usar libremente ya que están equipados con una licencia libre, en detalle es una biblioteca que pone a disposición de todos un directorio web interactivo real, lo cual es esencial para hacer más fácil la selección y gestión de fuentes a través de Android . y CSS .

Google pone a disposición este servicio y todos los caracteres presentes y el ancho de banda son definitivamente gratuitos.

Por este motivo es necesario elegir cuidadosamente las tipografías más adecuadas a su caso, con el fin de optimizar el rendimiento técnico y hacer que el sitio web sea agradable a la vista del usuario.

¿Qué es Google Fonts?

Google Fonts es una licencia gratuita para simplificar fuentes a través de CSS y Android. Google Fonts se creó para simplificar la búsqueda de fuentes y está disponible de forma gratuita con licencias de código abierto. Se pueden utilizar tanto para proyectos comerciales como no comerciales.

Dentro del sitio, a través del comando de búsqueda apropiado, podemos elegir la fuente estéticamente más adecuada para nuestro caso y recuperarla dentro de nuestro sitio, para garantizar que el texto de una página en particular tenga el formato de acuerdo con estos dictados.

Con la definición de las primeras especificaciones CSS, de hecho, surgió la necesidad de que los recursos web recuperaran fácilmente las fuentes no de los terminales locales sino de los servidores, para garantizar una visualización correcta para todos.

Google Web Fonts, hoy Google Fonts, ha reemplazado al TypeKit anterior en el suministro de fuentes para incrustar en sitios web : de hecho, es suficiente integrar el código apropiado en el HTML o CSS del sitio para garantizar la misma visualización para todos los dispositivos.

Las tipografías que podemos elegir se dividen en:

  • Serif (fuente con gracias), pequeñas extensiones al final de las letras que parecen acercarlas entre sí, como Droid Serif;
  • Sans Serif (fuente sans serif), como Roboto y Open Sans;
  • Escritura a mano (fuentes que se asemejan a la escritura a mano), como Shadows Into Light;
  • Monospace (fuente cuyos caracteres tienen el mismo ancho y que tienen un estilo que se asemeja al de las máquinas de escribir) como Inconsolata
  • Pantallas (fuentes con letras muy cercanas) como Lobster y Poiret One, generalmente adecuadas para proyectos grandes

Las fuentes deben elegirse en un acuerdo, sin exagerar para no sobrecargar demasiado el sitio; optar por más de dos o tres fuentes por página dificultaría la lectura.

Ventajas de usar fuentes de Google

Las fuentes de Google, como se mencionó, son recursos estéticos del sitio web que pueden incentivar el tiempo de permanencia y las conversiones a CTA. De hecho, ofrecen varias ventajas:

  • biblioteca de fuentes gratuita y segura (proporcionada por Google)
  • fuentes de uso libre para proyectos comerciales y no comerciales (no se aplican restricciones de licencia)
  • mejorar la legibilidad de las páginas
  • muy ligeros (hacen más rápida la carga de la página web que los aloja)
  • muy versátil : disponible en numerosas versiones para satisfacer las necesidades visuales y de formato de todos
  • asegurarse de que las fuentes sean compatibles con todos los sitios y aplicaciones
  • estéticamente atractivo

Todas las fuentes de Google cumplen con los estándares precisos de la comunidad de Google y demuestran ser muy compatibles con la mayoría de los sitios.

¿Por qué usarlos?

Como sabemos, las fuentes utilizadas también pueden tener un impacto significativo en los tiempos de carga de las páginas web y en la legibilidad de los contenidos. Se traducen, por tanto, en elementos importantes para la experiencia del usuario de la página, que a su vez pueden afectar al posicionamiento a través de las señales de satisfacción que produce el uso de los usuarios.

Las fuentes de Google están diseñadas por Google para enviar el archivo de la manera más ligera posible en relación con las tecnologías utilizadas para su uso.

Gracias a un menor tiempo de carga podemos conseguir una menor tasa de rebote de nuestra página web, aumentando las posibilidades de conversión. De hecho, una fuente difícil de leer disuade de llegar al final de la página e incita al usuario a salir antes de responder a la llamada a la acción.

¿Qué fuentes de Google elegir para nuestro sitio?

La tipografía puede ser muy valiosa para su sitio. Una tipografía adecuada para tu proyecto refleja el estilo estético del sitio web, es muy legible y transmite cierta personalidad.

En la tienda hay más de 1040 fuentes entre las que seguramente encontraremos la adecuada para nosotros . Además, como hemos comentado, las tipografías están disponibles de forma gratuita, por lo que podemos experimentar con una u otra hasta encontrar la que mejor se adapta a nuestro sitio. Así que tomemos un tiempo para elegir la fuente adecuada para el diseño de nuestro sitio, lo que fomentará una mayor lectura.

Para elegir las Google Fonts más adecuadas para nuestro sitio debemos prestar atención a varios aspectos como:

  • legibilidad
  • profesionalidad acorde con el estilo del sitio
  • tamaño del proyecto web para adaptarse a
  • tema del sitio

Entre las tipografías más populares en circulación tenemos:

  • Roboto (fuente del sistema para Android)
  • Kinsta (utilizado por Google para algunos sitios web)
  • Source Sans Pro (la primera fuente de código abierto de Adobe)
  • Raleway (fuente especial de gran formato)
  • alegre
  • nunito sans
  • Work Sans (adecuado para uso en pantalla)

Las fuentes de Google son gratuitas

La licencia, como se mencionó anteriormente, es gratuita y, al ser de código abierto, no tiene costos. Sin embargo, es bueno saber que ciertos caracteres se difunden a través de la licencia de Apache . Sin embargo, en ambas situaciones existe la oportunidad de usarlos también para uso comercial. Además, esta colección también es divulgada por los servicios web SkyFonts de Monotype y Edge Web de Adobe y también por Typekit de Monotype .

Recientemente, más precisamente a partir de 2021, este proyecto también se ha extendido a los iconos, ya que a través de un primer conjunto de símbolos compuestos por las necesidades generales de comunicación e iconos materiales que ofrecen la posibilidad de descargar los elementos directamente al escritorio para su uso en digital Formato válido tanto para iOS , Web y Android .

Cómo instalar Google Fonts en el sitio

Las fuentes de Google se pueden incrustar desde el sitio en el que se colocan o descargar e incrustar a través de FTP, así como utilizarse para proyectos de impresión.

Antes de descargar una o más fuentes de Google Fonts , es importante elegirlas. El catálogo en línea definitivamente incluye una infinidad de personajes. Este servicio, además de satisfacer todas las necesidades de los usuarios desde este punto de vista, ofrece la oportunidad de buscar rápidamente las que más te gustan y que pretendes utilizar en tu plataforma. En particular, la página oficial de Google Fonts le permite decidir diferentes filtros para realizar rápida y fácilmente una búsqueda precisa, en detalle, existe la oportunidad de intervenir en los siguientes sectores:

  • Buscar : este campo le permite escribir el nombre exacto de una fuente que ya conoce;
  • Vista previa de texto : le permite ver una vista previa real del efecto óptico de la fuente que desea utilizar, esto sucede en particular al elegir un texto básico o agregar una oración de acuerdo con sus preferencias;
  • Tamaño de fuente : ajusta en detalle las medidas en píxeles del texto presentado durante la fase de vista previa ;
  • Categorías : seleccione el tipo de fuente según las 5 secciones en las que se encuentran todas las tipografías de Google;
  • Idioma : limita la búsqueda por el alfabeto de un idioma específico;
  • Propiedades de la fuente: elija ciertas propiedades de la fuente, como el número de estilos, la inclinación, el grosor y el ancho.

Cómo instalar las fuentes de Google

  • visite el sitio de fuentes de Google
  • seleccione la fuente en cuestión
  • haga clic en Descargar para descargarlo en formato zip
  • descomprima la carpeta, haga clic derecho en el archivo ttf y seleccione instalar:

De esta forma podemos utilizar las mismas tipografías que el blog o sitio para crear ebooks o gráficos acordes al estilo web.

En primer lugar, debe verificar si el tema de nuestro sitio web ya integra Google Fonts, ya que los temas premium más recientes ya están configurados para alojarlos. De lo contrario, podemos instalar un complemento como Easy Google Fonts o Google Fonts Typography para introducirlos.

Si no queremos instalar un plugin más, podemos recurrir a la llamada a través de la API de Google Fonts . En este caso, debe agregar un enlace entre la hoja HTML y la hoja de estilo.

La plataforma nos proporciona el código apropiado para incrustar en el <head> de la página HTML para simplificar la recuperación de las fuentes seleccionadas en nuestro sitio.

Cómo agregar fuentes de Google a WordPress

Es bueno saber que hay dos métodos principales para incluir fuentes de Google directamente en sus proyectos, específicamente para un estilo de WordPress , necesita instalar un determinado complemento donde existe la oportunidad de delegar el trabajo o la otra opción para agregar una fuente implica el procedimiento manual.

En primer lugar, si el trabajo se realiza utilizando el entorno WP , hay que analizar que el tema no incluye Google Fonts al mismo tiempo por defecto. Para comprobar este aspecto, basta con comprobar el rendimiento en el panel de configuración correspondiente. En caso de que esta forma no esté presente existe otra opción que es descargar el plugin como Google Font Typography o Easy Google Fonts instalando directamente en el panel, en este punto se puede continuar con la elección de la fuente que más le llame la atención.

Además, si desea utilizar la API de Google Fonts para incluir fuentes directamente en los sitios web mediante el procedimiento manual, no necesita hacer ningún tipo de programación, ya que todo lo que tiene que hacer es simplemente integrar un enlace específico a la hoja de estilo en el documento HTML. Por lo tanto, es necesario mencionar la fuente en un estilo CSS . Simplemente para llevar a cabo este paso de forma rápida y tranquila basta con copiar y pegar el código indicado en la etiqueta del enlace que se encuentra específicamente en la carpeta denominada cabecera del sitio. Finalmente, es esencial usar el CSS resultante para llevar la regla a los componentes HTML.

Conclusiones

A estas alturas seguramente entenderás qué son las Google Fonts y cómo necesitas instalarlas en tu sitio web, página o blog para poder utilizarlas.

Las fuentes representan una parte importante en el mundo de los gráficos y sitios web donde hacen que el estilo de la plataforma sea único y especial. La elección de las fuentes de Google es definitivamente un paso importante, ya que definirán visualmente el estilo. Con base en los estudios realizados por el diseño web, surgió que en este sector es necesario seguir ciertas reglas para tener un resultado perfecto de acuerdo con sus preferencias y necesidades, en particular, estas últimas se refieren específicamente a colores , formas y fuentes .

En cuanto a las fuentes, estas últimas deben ser: fáciles de leer y comprender , si la fuente elegida no es fácil de leer se recomienda usarla gráficamente en algunas imágenes a través de elementos gráficos, realizar una de las comprobaciones de compatibilidad entre navegadores , usar desde uno hasta un máximo de tres tipos de letra con estilo diferente, use fuentes de tipo clásico usando una fuente serif para títulos y encabezados y sans-serif en su lugar para textos.

¿Necesitas poner al día tu web?

¿Necesitas alguno de nuestros servicios de diseño web? En IndianWebs contamos con una larga experiencia, y un equipo de programadores y diseñadores web en diferentes espcialidades, somos capaces de ofrecer un gran abanico de servicios en la realización de páginas web a medida. Sea cual sea tu proyecto, lo afrontaremos.