¡Cómo guía para usar Google Fonts con Google y complementos!

Si es diseñador, es más probable que considere la tipografía como la base de cualquier diseño de sitio web. No solo seleccionando las fuentes, sino también brindando una ventaja a la legibilidad de las páginas web.

¿Qué es la tipografía?
La tipografía se trata de seleccionar la longitud de línea, el tamaño de punto, el espacio entre líneas, los tipos de letra y ajustar los espacios entre los grupos de letras.

¿Por qué Google Fonts es una opción clara?
Hubo momentos en que Internet tenía fuentes estándar que aburrirían a cualquiera que las mirara, pero con el paso del tiempo, los diseñadores y desarrolladores web se vieron obligados a limitar sus opciones de fuentes de texto en vivo y diseñar las fuentes que son compatibles con la mayor cantidad de usuarios. La Internet. Se les ocurrió CSS3. Typekit lo inició.

Typekit desarrolló algunas de las fuentes atractivas que ayudaron a los diseñadores a seleccionar fuentes atractivas y fáciles de usar para sus páginas web, pero el único problema al usar Typekit era el costo que cobran a sus usuarios.

El precio era de $49 y en caso de que un diseñador quisiera desarrollar dos sitios, tenía que pagar $99 solo por usar fuentes en la página web. Gracias a Google que vino con sus brillantes diseños de fuentes y lo ofreció gratis.

Es bastante obvio que no obtienes gratis lo que puedes obtener con dinero, pero créelo, las fuentes web de Google eran, sin embargo, diferentes a las que ofrece Typekit. Por supuesto, las fuentes web de Google son mejores cuando no le gusta gastar demasiado en fuentes, ya que sabe que crear un sitio web completo cuesta demasiado.

Fuentes de Google y su personalización:
A día de hoy, hay más de 647 fuentes de familias de fuentes separadas en la biblioteca de Google. Cuando selecciona una fuente para el contenido de su sitio web, es imperativo verla de manera similar a cómo va a implementar esa fuente. Algunas fuentes se ven perfectas para el contenido del cuerpo, pero terribles como encabezado.

Afortunadamente, Google Web Fonts le permite personalizar su vista previa para que coincida con su caso de uso. Puede ingresar texto de vista previa personalizado y cambiar su tamaño de vista previa como prefiera. Es importante obtener una vista previa de cualquier encabezado o texto del cuerpo que vaya a usar en la vista de párrafo y, si tiene mucho texto del cuerpo, no use demasiadas fuentes personalizadas.

¡Encauzando la fuente correcta!
Como somos conscientes de que hay más de seiscientas familias de fuentes para examinar, se vuelve difícil filtrar y elegir la correcta simplemente desplazándose por ellas una por una. Entonces, use los pasos a continuación para perfeccionar exactamente lo que necesita para su sitio web:

• Eche un vistazo rápido a las fuentes que Google actualizó recientemente. Lo más probable es que obtenga la fuente de tendencia y libre de errores sin tener que mirar el resto de las fuentes. Además, vea las fuentes utilizadas por la mayoría de los diseñadores y desarrolladores. Hacer esto te permitirá conocer fuentes versátiles que puedes usar en múltiples estilos y anchos.
• Si conoce el tipo de letra de su sitio web, las características y el estilo de las fuentes pueden mejorar sus resultados, como si desea una fuente manuscrita, deshabilite todos los demás tipos de resultados.
• Google le permite refinar aún más su búsqueda de fuentes agregando grosor, inclinación y ancho del carácter como opciones de filtrado. ¿No es una característica genial obtener la mejor fuente para su sitio web?

Selección de las fuentes
Google tiene varios métodos para elegir y luego implementar las fuentes de acuerdo con las necesidades del propietario del sitio web. No hay nada correcto o incorrecto aquí. Lo que sea mejor para ti, lo obtendrás. Admite tres botones para ayudarlo a elegir la fuente correcta:

• Uso rápido: para echar un vistazo rápidamente a la fuente que te gusta.
• Pop out: para saber más sobre la fuente que te gusta, es decir, su funcionalidad y usos.
• Colección: si desea utilizar más de dos fuentes, Colección es el botón en el que debe hacer clic. Agregará todas las fuentes que desee en una sola página.

¿Cómo usar las fuentes de Google?
Una vez que haya seleccionado las fuentes que le gustaría usar en su página web, puede hacer clic en la pestaña "Usar" para verlas en acción. Ahora, cuando esté seguro de la fuente, todo lo que necesita es simplemente copiar y pegar un código en su página web. Obtendrá tres opciones para elegir:

Estándar:
Es un enlace de hoja de estilo estándar. Debe colocarlo en la parte principal de su archivo HTML, lo que le ahorrará el paso de agregar la regla @import ya que está agregando significativamente una hoja de estilo que ya la incluye. Ejemplo:

CSS:
Use la regla @import de CSS en caso de que no desee vincular a la hoja de estilo generada automáticamente en su encabezado. Utilice el siguiente código para integrar las fuentes en su CSS:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google y Typekit desarrollaron este código aquí como parte del cargador WebFont para dar a los usuarios más control sobre la carga de fuentes.

Tome un fragmento de código HTML y colóquelo cerca del encabezado HTML como:

Título de la página

Salta al CSS y sigue esto:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

¡Con la ayuda de complementos!
Hay algunos complementos disponibles que ofrecen una integración perfecta con Google Font. El uso de complementos tiene sus limitaciones, ya que un complemento no sabrá buscar un texto en particular sin personalizarlo más con la ayuda de HTML o CSS. Pero aún así, aquí hay algunos complementos para incluir fuentes de Google en su sitio web.

1. Complemento de fuentes

Es una manera fácil y efectiva de incrustar fuentes de Google en su sitio web con solo unos pocos clics. Puede usar su hoja de estilo o usar el estilo CSS; ambos trabajarán para adaptarlos a su tema. Puede hacerlo desde el área de administración o la hoja de estilo de su sitio web. Fonts Plugin es todo lo que necesita para su sitio web, de forma rápida y eficiente.

2. Fuentes fáciles de Google

Con el complemento Easy Google Fonts, no necesita tocar ningún código para obtener las fuentes en su sitio web. Desde elegir hasta optimizar y dar colores únicos para vivir y obtener una vista previa, todo con las fuentes se puede hacer usando Easy Google Fonts.

3. TK Fuentes de Google

TK Google Fonts agregará las 291 fuentes web de Google a su panel de editor visual cuando esté desarrollando páginas o publicaciones. Solo instálalo y comienza a usarlo.

Instalación de los complementos anteriores:

• Iniciar sesión en el administrador de WordPress
• Haga clic en "Complementos"
• Haga clic en "Agregar nuevo"
• Escriba el nombre del complemento en la esquina superior derecha y haga clic en "instalar ahora"

Para personalizar los complementos

• Haga clic en "Apariencia" y luego haga clic en "Personalizar".
• Haga clic en "Visitar sitio" y luego en "Personalizar"
• Notarás un nuevo menú agregado como "Tipografía"

¡Implemente el aprendizaje!
Esperamos que leer el artículo haya sido una lección de aprendizaje para usar, y ahora es el momento de usar este conocimiento en su sitio web. Navegue a través de varias fuentes, complementos para mejorar la tipografía en sus sitios web. Tenga en cuenta que si está personalizando una fuente, será más beneficioso que simplemente copiar y pegar una fuente. Háganos saber las fuentes y los métodos que utiliza para agregar tipografía para atraer a su audiencia en sus proyectos.

Las fuentes mejoran la forma estética de un sitio web y son la base de cualquier diseño de sitio web. Las fuentes o la tipografía tienen que ver con la selección de la longitud de línea, el tamaño de punto, el espaciado de línea, los tipos de letra y el ajuste de los espacios entre las letras del grupo.

Como diseñador, siempre es bueno refinar aún más la búsqueda de fuentes agregando el grosor, la inclinación y el ancho del carácter como opciones de filtrado. No todas las fuentes se ven bien en el cuerpo y/o el contenido del título.

Algunas fuentes no se ven bien como encabezado y otras no se pueden leer fácilmente en el contenido del cuerpo. Por lo tanto, es recomendable ver la fuente seleccionada de manera similar a cómo la va a implementar para que pueda probar su legibilidad.

Atrás quedaron los días en que Internet solía tener las mismas fuentes estándar aburridas. La tecnología avanzó y los diseñadores y desarrolladores web se vieron obligados a diseñar fuentes que fueran compatibles con la mayor cantidad de usuarios en Internet.

Se les ocurrió CSS3. Typekit lo inició y desarrolló algunas de las fuentes atractivas y atractivas para que las usen los diseñadores web. Pero, eran demasiado costosos. Afortunadamente, Google vino al rescate y ofreció diseños de fuentes brillantes y fáciles de usar de forma gratuita.

¡Encauzando la fuente correcta!

Actualmente, la cantidad de fuentes en la biblioteca de Google es de 647, lo que dificulta filtrar y elegir la correcta. Sin embargo, con estos 3 pasos, puede obtener exactamente lo que necesita para su sitio web:

• Eche un vistazo a las fuentes actualizadas recientemente en Google y obtenga una fuente de tendencia y libre de errores. Además, busque las fuentes utilizadas por la mayoría de los diseñadores para conocer la versatilidad de las fuentes que puede usar en múltiples estilos y anchos.
• Conoce la tipografía de tu web, características y estilo de las fuentes para mejorar tus resultados.
• Refine su búsqueda de fuentes agregando grosor, inclinación y ancho del carácter como opción de filtrado.

Selección de fuentes

Dependiendo de sus necesidades, Google tiene varios métodos para ayudarlo a seleccionar una fuente. Para elegir la fuente correcta, considere:

Acceso rápido: para echar un vistazo rápidamente a la fuente que te gusta

Pop Out: para saber más sobre la fuente, es decir, la funcionalidad y los usos.

Colección: si desea utilizar más de dos fuentes, haga clic en este botón. Agregará todas las fuentes que desee en una sola página.

Cómo usar las fuentes de Google

Una vez que haya seleccionado su fuente preferida, haga clic en la pestaña 'Usar' para verlas en acción. Luego, copie y pegue algún código en su página web. Obtendrá tres opciones para elegir:

Estándar: este es un enlace de hoja de estilo estándar. Colóquelo en la parte principal de su archivo HTML. Le ahorrará el paso de agregar la regla @import ya que está agregando significativamente una hoja de estilo que ya la tiene.

CSS : use la regla @import de CSS en caso de que no desee vincular a la hoja de estilo generada automáticamente en su encabezado . Utilice el siguiente código para integrar las fuentes en su CSS:

familia tipográfica: 'Henry Pigeous', serif;
familia de fuentes: 'Diplomatic'. cursivo;

JavaScript : Google y Typekit desarrollaron este código aquí como parte del cargador de fuentes web para dar a los usuarios más control sobre la carga de fuentes .

Tome un fragmento de código HTML y colóquelo cerca del encabezado HTML como:

Título de la página

Salta al CSS y sigue esto:

h1 {

fuente: 400 45px/0.5 'Diplomática', Arial, sans-serif;

}

pags {

fuente: 400 14px/1.5 'Henry Pegasus', Times, serif;

}

Sobre el Autor:
Catherrine García es una desarrolladora web experimentada en Hosting Facts y una bloguera apasionada. Le encanta compartir sus conocimientos a través de sus artículos sobre desarrollo web y WordPress.