google-fonts-wordpress

Google Fonts puede ser un recurso muy útil para los diseñadores, ya que les permite utilizar distintas fuentes tipográficas en sus desarrollos web. Aunque su uso es muy sencillo, la integración con WordPress no existe, al menos por defecto, ya que hay algunos themes que si lo integran. Pero si podemos instalar un plugin para gestionar la Google Fonts en cualquier theme de WordPress y hoy vamos a ver cómo funciona el plugin Google Fonts Typography.


Cómo usar las Google Fonts en WordPress: Google Fonts Typography

TABLA DE CONTENIDOS


¿Qué son las Google Fonts?

Google Fonts es una colección de tipos de letras que Google ofrece, de forma gratuita, a todos los usuarios que quieran utilizarlas.

Quizás no lo sepas, pero las fuentes tipográficas tienen derechos de autor y se tiene que pagar una licencia de uso si quieres utilizarla en cualquier proyecto o aplicación.

También hay fuentes con licencia open source que son libres para su uso, sea este comercial o no.

De la mano de Google llego Google Fonts, con una gran colección de fuentes tipográficas, más de 1400 en el momento de escribir este artículo, todas ellas con una licencia de libre uso.

Para usar cualquiera de las fuentes de Google Fonts, sólo tienes que acceder a su web, elegir la que más te guste y descargarla para instalarla en tu dispositivo.

google-fonts-web

También puedes usar una API que Google pone a disposición de los desarrolladores para que puedan integrar las Google Fonts en sus desarrollos.

Para su uso en la web, sé puede añadir un código HTML para que se carguen la tipografía elegida desde los propios servidores de Google o descargar la fuente y subirla al servidor que aloje el proyecto web.

Ofrecen un catálogo muy amplio de tipografías, ya sean clásicas, modernas, para usar en titulares, etc...

Debido al catálogo y a la cantidad de opciones que ofrece para poder usarlas, además de ser gratuitas, las Google Fonts son muy usadas en todo tipo de proyectos, ya sean web, apps, etc...

contratar-hosting-wordpress

Google Fonts Typography en WordPress

Si después de saber qué son las Google Fonts quieres usarlas en tu sitio creado con WordPress, puedes hacerlo de distintos métodos.

Algunas plantillas de WordPress ya están configuradas para poder utilizar las Google Fonts desde las propias opciones del theme, pero no todas las plantillas lo hacen.

Entonces, si quieres usar las Google Fonts en tu plantilla de WordPress y esta no está diseñada para usarlas, puedes instalar un plugin en tu WordPress para poder usarlas.

En nuestro caso, vamos a ver cómo funciona el plugin Google Fonts Typography, el cual puedes descargar desde aquí o buscarlo en el repositorio de plugins de tu instalación de WordPress.

Está instalado en más de 200 mil WordPress y tiene una valoración de 5 estrellas, al menos, en el momento de probarlo escribiendo este post.

google-fonts-typography-plugin

Una vez lo hayas activado, encontrarás un nuevo menú en la pantalla de administrador de WordPress llamado A Fonts Plugin y una invitación para recibir un email con algunas instrucciones de uso, pero tendrás que dejar tu cuenta de correo, así que lo más seguro es que luego tengas que darte de baja para dejar de recibir correos.

menu-google-fonts-typography

Las opciones que encontramos son:

  • Fonts Plugin

    Sólo veremos la pantalla principal que hemos coemntado antes.

  • Personalizar fuentes Un acceso directo al apartado de personalización de la plantilla que esté instalada.

  • Documentación Un enlace a la documentación del plugin.

  • Fuentes Adobe Si usas las fuentes de Adobe, que son de pago, pueden añadir la API para poder utilizarlas en WordPress con el mismo plugin.

opcion-fuentes-adobe

 

Cómo cambiar las fuentes de la plantilla de WordPress

Cuando tengamos instalado el plugin Google Fonts Typography, ya podemos cambiar la tipografía en cualquiera de las plantillas de Google.

El cambio es muy sencillo y sólo tenemos que acceder a las opciones de configuración de nuestra plantilla de WordPress.

Desde el menú del plugin, sólo tienes que hacer click en Personalizar Fuentes o si lo prefieres, acceder directamente a la configuración de la plantilla desde Apariencia > Personalizar.

Entre las opciones que encontrarás, verás que tiene una nueva opción llamada Fonts Plugin con el logotipo del plugin instalado.

Debes de tener en cuenta que esta opción no sustituye la opción de Tipografía que puede tener cada plantilla que estemos utilizando, ya que se debería ver don opciones distintas.

fonts-plugin-y-tipografia-themes

Para modificar la tipografía de la plantilla con alguna de las que ofrece Google Fonts, sólo tienes que acceder al plugin.

Verás que tienes varias opciones:

  • Ajustes básicos
  • Ajustes avanzados
  • WooCommerce
  • Carga de las fuentes
  • Depuración
  • Optimización

opciones-google-fonts-typography

Ten en cuenta que plugin Google Fonts Typography tien dos versiones, una gratuita que puedes usar libremente y otra PRO en la que tienes que pagar una licencia para desbloquear algunas de las opciones.

Esto es importante porque verás que hay opciones que no puedes modificar, sobre todo las más avanzadas verás un mensaje en el que te invita a pasar a la versión PRO.

Las opciones de WooCommerce sólo aparecerán si tienes instalado el plugin, como si está en el WordPress en el que estamos haciendo la prueba.

Si entras en Ajustes Básicos verás que sólo tienes 3 opciones en las que puedes cambiar las fuentes, que son:

  • Tipografía base
  • Tipografía de encabezados
  • Tipografía de los botones y campos de entrada.

Lo único que debes hacer es elegir la tipografía en cada una de las opciones. Puedes elegir una para cada opción o la misma para todos.

Si quieres puedes volver a la fuente por defecto de la plantilla en cualquier momento y si necesitas ayuda para encontrar la fuente que buscas, puedes entrar en la web de Google Fonts, donde puedes ver una previsualización de las tipografías, algo que no puedes hacer desde el plugin.

ajustes-basicos-ejemplo-opciones

Como verás, el cambio de tipografía es inmediato y puedes ver cómo queda en el personalizador del theme.

También puedes cambiar algunas opciones para cambiar la fuente como oblicua o negrita, siempre y cuando la fuente elegida tenga esa opción.

ajustes-basicos-tipografia-oblicua

Si entras en Ajustes avanzados podrás personalizar, aun más las opciones de las tipografías de la plantilla.

Puedes cambiar la tipografía del título y de la descripción del sitio, por si quieres que sean distintas. Puedes modificar el menú de navegación, desde aquí también, algo que se cambia en las opciones básicas, junto con la tipografía base, pero desde aquí puedes diferenciarlas.

También puedes elegir el tipo de letra de la barra lateral y del pie de página, todo de manera independiente, puedes elegir una Google Font para cada sección de la web.

Una opción que no tenemos en la opción básica del plugin es la de descargar la fuente para cargarla desde nuestro servidor y no desde los servidores de Google.

Tampoco tendrás la opción de optimizar la carga de las fuentes, aunque por lo general, las fuentes de Google Fonts suelen estar bastante optimizadas.

 

Conclusión

Como puedes ver, las opciones de personalización del plugin Google Fonts Typography son muchas, incluso en la versión gratuita y así puedes usar las Google Fonts en WordPress sin tener que añadir ningún código de manera manual.

Sobre si es bueno o no utilizar Google Fonts, depende mucho de cada uno y sobre todo de cada desarrollador.

Algunos prefieren que todo salga des su servidor y que no pase por los servidores de Google y a otros les resulta indiferente, esto ya es cuestión de gustos y preferencias.

En cualquier caso, cualquier desarrollador puede utilizar las dos opciones, cargar los tipos desde Google o desde el servidor, pero la versión gratuita del plugin Google Fonts Typography, sólote permitirá hacerlo desde el plugin.

contratar-hosting-wordpress




Imagen

Hosting Web

Lanza tu proyecto a la red. Desde 2,48 € al mes podrás tener visible tu negocio en Internet ¿A qué esperas?

Dominios

El primer paso de un negocio en Internet es contar con un dominio. ¡Regístralo!

Imagen

Certificado SSL

Protege tu web, gana posiciones en Google y aumenta tus ventas y clientes.

Imagen

Hosting WordPress

Para páginas corporativas y ecommerce hechos en WordPress. Configuración específica y backups diarios.
AXARNET COMUNICACIONES S.L | Lee nuestro Aviso Legal y nuestra Política de Cookies | Echa un vistazo a nuestras Condiciones Generales de Contratación
Política de Cookies
.
Usamos cookies propias y de terceros para asegurarnos de brindarte la mejor experiencia en nuestra web y para recopilar datos sobre cómo los visitantes interactúan con nuestra web y nuestros servicios. Al hacer clic en Aceptar, estás de acuerdo con el uso de todas las cookies para analítica, publicidad y soporte. Si lo prefieres, puedes hacer clic en Configurar y rechazar las cookies de analítica y publicidad. Para más información puedes leer nuestra Política de cookies.
Cookies manager

Continúa con tu compra

¿Es la primera vez que compras?

Si ya eres cliente de Axarnet