Google Web Fonts for WordPress

Google Web Fonts for WordPress
Google Web Fonts for WordPress
Aprender a utilizar las fuentes de Google en su sitio de WordPress es una técnica sencilla que puede aprender a cambiar completamente la forma en que sus usuarios ven su sitio. Incluso puede cambiar la forma de utilizar los temas, ya que podrías sentirte atrapado o dudar de utilizar un tema cuando utilice una fuente que no te guste tanto.

Además, la colección de fuentes de Google te lleva a un mundo increíble lleno de nuevas oportunidades tanto para los diseñadores web experimentados como para los aspirantes a diseñadores web. Abre las puertas a nuevas posibilidades en términos de estilo y te ofrece más formas de captar la atención de tus usuarios y de comunicarte con ellos a través del diseño.

Vamos a aprender a usar las fuentes de Google en WordPress usando dos de los métodos más populares que los diseñadores usan para personalizar los sitios de WordPress:

  • Plugins
  • Código personalizado

¿Qué es Google Web Fonts for WordPress?

WP Google Fonts es un simple plugin de WordPress. Es tan simple como cualquier otro plugin de WordPress que todo lo que necesitas es ir a la página Agregar Nuevo Plugin en tu administrador de WordPress, buscar el plugin y hacer clic en Instalar Ahora para agregarlo a tu sitio.

El plugin te permite añadir hasta 6 fuentes de Google a tu sitio. Puedes seleccionar la fuente, el estilo de fuente, el elemento HTML y los conjuntos de caracteres que te gustaría usar con unos simples clics. Incluso puedes añadir tu propio CSS personalizado.

Sólo hay un puñado de fuentes que son comunes a la mayoría de las configuraciones de navegadores web y sistemas operativos. Si intenta utilizar una fuente diferente en su sitio web, es posible que no se muestre correctamente para sus visitantes. Esto podría ser un serio problema de diseño o limitar seriamente su capacidad de personalizar su sitio web. Es probable que haya visto sitios web con fuentes que parecen fuera de lugar; en muchos casos, esto se debe a que el diseñador web decidió usar una fuente poco común que no tiene en su computadora.

Leer  Super Forms - WooCommerce Checkout Add-on

Cuando no estás usando una de las fuentes estándar, necesitas estar razonablemente seguro de que tu visitante tiene la fuente instalada en su computadora, o necesitas hacer que tu visitante descargue la fuente específica que estás usando en tu sitio web. Normalmente, esto requeriría algo de codificación HTML y CSS, pero una solución más fácil para los sitios web de WordPress es usar el plugin WP Google Fonts. Te da un fácil acceso a las fuentes del directorio gratuito de Google Web Fonts basado en la web. El plugin WP Google Fonts cargará las fuentes que selecciones, para que puedas aplicarlas al texto de tu sitio web. Hay más de 100 fuentes disponibles públicamente. Puedes ver la lista en el directorio Google Web Font.

¿Cómo usar Google Web Fonts for WordPress?

Después de instalar y activar el plugin, sólo tienes que ir al menú Configuración > Fuentes de Google. Selecciona la primera fuente que quieras usar y luego marca las casillas junto a los elementos de texto a los que quieras aplicar esa fuente. Puedes aplicarla:

  • Texto por defecto (el elemento del cuerpo)
  • Niveles de titulares (etiquetas H1 a H6)
  • Citas Bloqueadas
  • Texto del párrafo (el elemento p)
  • Listas (tanto numeradas como con viñetas)

Puedes seleccionar hasta 6 fuentes de Google diferentes de esta manera. Por ejemplo, puedes establecer el texto predeterminado en «Tangerine», tu H1 y H2 en «Droid Sans», tus listas en «Inconsolata», etc.

Si quieres usar una fuente web de Google para un elemento de texto diferente, como el texto del encabezado o el encabezado de la barra lateral, necesitarás saber algo de CSS. En primer lugar, debes seleccionar la fuente que deseas utilizar en el menú desplegable. A continuación, debes escribir el código CSS apropiado en el cuadro de CSS personalizado, identificando el elemento que deseas cambiar y especificando la fuente que has seleccionado en el menú desplegable.

Leer  Quform - WordPress Form Builder

También puedes usar el cuadro de CSS personalizado para incluir código CSS no relacionado con tus fuentes, y se aplicará a todos los visitantes de tu sitio web. Esta característica es útil para realizar cambios de estilo sin el riesgo de editar directamente los archivos de tu tema.

Mejores prácticas de uso de las fuentes de Google en un sitio web

Integrar las fuentes de Google de WordPress no es una ciencia de cohetes, pero siempre hay dos formas de realizar cualquier tarea: la buena y la mejor.

  • Limitar el peso de las fuentes: Seleccionar el conjunto completo de pesos de fuentes es tentador, pero tiene sus inconvenientes. Para cada variante, la API se hace más pesada y toma más tiempo cargar el conjunto completo de pesos de fuentes. Normalmente se carga al principio de la página web y, si no se optimiza, puede ralentizar el tiempo de carga inicial de la página web.
  • Aloje las fuentes localmente: La fuente de Google es una biblioteca en línea que está alojada en otro lugar. Aunque tiene un impacto mínimo en el rendimiento de su sitio, sin embargo, en caso de no estar disponible, podrá seguir alojando las fuentes de Google seleccionadas si se alojan localmente.
  • La accesibilidad es importante: Ya no es una opción para optimizar su sitio web para personas con problemas de visión. Las fuentes de Google le permiten estilizar su fuente de la manera que sea más conveniente para este tipo de visitantes.
  • Utiliza el contraste que es fácilmente legible en la mayoría de los tamaños y tipos de pantalla, y no es pesado para el ojo del lector. Usar colores muy brillantes o muy claros no es lo ideal. Elija el color y el tamaño más adecuado para la mayoría de los lectores.
Leer  WooCommerce Product Accessories

Vídeos de Google Web Fonts for WordPress