Cómo usar las fuentes de Google en tu sitio de 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. 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

Cómo usar las fuentes de Google en WordPress: El método de los plugins

La forma más sencilla de añadir fuentes de Google a WordPress es a través del uso de plugins, como es el caso de cualquier cosa que tenga que ver con la personalización de WordPress. Hay dos plugins principales que puedes usar para este propósito. Ellos son:

  • Fuentes fáciles de Google – 200.000+ instalaciones activas, a partir de mayo de 2016
  • WP Fuentes de Google – 100.000+ Instalaciones activas, a partir de mayo de 2016

1. Fuentes fáciles de Google

Easy Google Fonts

Este plugin hace exactamente lo que dice que hace. Te proporciona una forma fácil de añadir fuentes de Google a tu sitio de WordPress. También es un plugin gratuito, así que todo lo que necesitas hacer para instalarlo es hacer clic en el botón Instalar ahora en el administrador de WordPress.

Easy Google Fonts Frontend

Este plugin te permite personalizar las fuentes de todas tus etiquetas de encabezado, así como las de los párrafos, usando nada más que el personalizador de temas de WordPress. También puedes usar la configuración del plugin para editar elementos específicos, como las comillas de bloque.

2. WP Fuentes de Google

WP Google Fonts

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.

WP Google Fonts Backend

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.

Cómo usar las fuentes de Google en WordPress: Métodos de codificación

How to Use Google Fonts in WordPress

Los plugins son geniales, pero tienen sus limitaciones. Puede que también prefieras añadir un poco de código a tu página web en vez de añadir otro plugin.

Vamos a repasar algunas formas diferentes de añadir código a tu sitio de WordPress. También repasaremos cómo usar el sitio web de Google Fonts y qué buscar en cada fuente.

Aquí están los métodos que repasaremos:

  • El Método Estándar
  • El método @import
  • El método de la cola
  • El método JavaScript

Cómo elegir las fuentes de Google para su sitio web

Esto es un consejo técnico, no un consejo de estilo. Las fuentes de Google son geniales. Te dan acceso a cientos de fuentes diferentes, pero tienen sus inconvenientes, como la mayoría de las fuentes. Estas fuentes ponen énfasis en los tiempos de carga de tus páginas. Es posible que no te des cuenta si sólo añades una única fuente a tu sitio, pero definitivamente debes mantener el número de fuentes y estilos que utilizas al mínimo.

Google Fonts Quick Use Button

Cuando encuentres una fuente que te gustaría usar, haz clic en su botón de Uso Rápido. Esto te lleva a una página que te permite personalizar tu fuente antes de proporcionarte el código/enlaces que tendrás que usar para añadirla a tu sitio web.

Google Fonts Styles

La primera parte te permite elegir los diferentes estilos que puedes usar. Sólo selecciona los que tú sepas que vas a usar. Esta sección también incluye un medidor que estima el efecto que pueden tener las diferentes combinaciones de estilos en el tiempo de carga de tu sitio.

Google Fonts Code

La segunda parte te permite elegir si quieres el latín, el latín extendido o ambos conjuntos de caracteres. La tercera parte es la más importante. Cuenta con tres pestañas, cada una de las cuales contiene un fragmento de código diferente que deberás insertar en partes específicas de tu sitio web para agregar la fuente a tu sitio. La cuarta parte simplemente contiene el estilo CSS que tendrás que añadir a tu hoja de estilo.

Comencemos a ver cómo agregar estos fragmentos de código a su sitio web.

Cómo usar las fuentes de Google en WordPress: El Método Estándar

Usaré las fuentes de Oswald y Cabin para estos tutoriales. Cuando veas la página de Oswald, puedes ver que el código de la pestaña Estándar se ve así:

<link href=$0027https://fonts.googleapis.com/css?family=Oswald$0027 rel=$0027styleheet$0027 type=$0027text/css$0027

Sin embargo, quiero usar Oswald y Cabin, por lo que añadiría un carácter | después de Oswald, y añadiría Cabin después de él:

<link href=$0027https://fonts.googleapis.com/css?family=Oswald|Cabin$0027 rel=$0027styleheet$0027 type=$0027text/css$0027

Si seleccionas más de un estilo para una fuente, tu código se verá similar a esto:

<link href=$0027https://fonts.googleapis.com/css?family=Oswald:400,300$0027 rel=$0027styleheet$0027 type=$0027text/css$0027

Necesitas usar una versión modificada de este código, y añadirla al encabezado de tu tema. Hay varias maneras diferentes de hacerlo. Si tienes un tema hijo, utiliza el archivo header.php de tu tema hijo. Consulta nuestro artículo sobre cómo crear un tema secundario en WordPress.

También puedes usar un plugin llamado Header and Footer.

Tendrás que añadir media=”pantalla” a tu código, y tendrás que añadir otra línea de código debajo de la línea principal para referirte a tu hoja de estilos. Mi código se ve así si utilizo Oswald y Cabin y sólo estilos regulares:

<link type="text/css" media="screen"``;
<;link type="text/css" media="screen"

Google Fonts header.php File

Añade tu versión de este código al archivo header.php de tu tema. Cambia "style.css" por el nombre de la hoja de estilo de tu tema. Si estás añadiendo el código al archivo header.php, añádelo encima de la hoja de estilo del tema.

Necesitas usar el estilo CSS en la cuarta sección de la página de la fuente para asignar la fuente a varios elementos de tu hoja de estilos. Abre tu hoja de estilo y utiliza la función Buscar (Ctrl+F) para encontrar el elemento que quieres editar, como H1, H2, H3, etc. Estas etiquetas suelen estar asignadas a fuentes específicas de forma predeterminada, por lo que es posible que no puedas añadir tu propio código, a menos que utilices un tema hijo.

Una vez que encuentres el elemento que quieres editar o añadirlo a la hoja de estilos del tema de tu hijo, asigna el estilo CSS así:

How to Use Google Fonts in Stylesheet

Puedes jugar con el tamaño de la fuente y otros atributos también. También puedes editar elementos HTML como el body tag, el tag H1, el tag p, etc.

Nota: Tuve problemas para hacer funcionar este método copiando y pegando el código directamente desde Google Fonts. Específicamente, tuve que cambiar las comillas simples $0027 por comillas dobles " para que la nueva fuente apareciera correctamente en mi sitio. Extraño problema pero vale la pena comprobarlo si tienes problemas.

Cómo usar las fuentes de Google en WordPress: El método @import

Google Fonts @import

Este es probablemente el método más fácil de usar, aparte de los plugins. Todo lo que tienes que hacer es pegar este código en tu hoja de estilo, típicamente llamado style.css:

@import url(https://fonts.googleapis.com/css?family=Oswald|Cabin);

Coloca el símbolo | entre dos familias de fuentes diferentes si quieres añadir más de una fuente de Google a tu sitio de WordPress. Este método es fácil, pero no se recomienda. Este método importa el archivo a las páginas web en las que lo usas. Esto significa que tú y tus usuarios tendrán que esperar a que se importe antes de que la página web descargue el resto de tu contenido, ya que este método bloquea las descargas paralelas.

Cómo usar las fuentes de Google en WordPress: El método de la cola

Este es uno de los métodos que muchos desarrolladores web prefieren ya que es simple y disminuye la cantidad de estrés que una fuente tiene en los tiempos de carga de sus páginas. El único inconveniente es que tienes que añadir un fragmento de este código para cada fuente que quieras añadir a tu sitio, lo que lo hace menos ideal para la gente que desea añadir más de una fuente a sus sitios.

Abre el archivo functions.php de tu tema y añade este código:

función ft_google_fonts() {
wp_enqueue_style( $0027ft-google-fonts$0027, $0027http://fonts.googleapis.com/css?family=Oswald$0027, false );
 }
add_action( $0027wp_enqueue_scripts$0027, $0027ft_google_fonts$0027 );

Reemplaza a Oswald con la familia de fuentes que quieras usar, así como con los estilos que quieras usar. Si agregara los tres estilos disponibles para Oswald, mi código se vería así:

función ft_google_fonts() {
wp_enqueue_style( $0027ft-google-fonts$0027, $0027http://fonts.googleapis.com/css?family=Oswald:300,400,700$0027, false );
 }
add_action( $0027wp_enqueue_scripts$0027, $0027ft_google_fonts$0027 );

Cómo usar las fuentes de Google en WordPress: El método JavaScript

Google Fonts JavaScript

El último método consiste en hacer clic en la pestaña de JavaScript en la tercera sección de la página de fuentes de Google para la fuente que desea utilizar. Este es otro método en el que tendrás que añadir un guión para cada fuente individual que te gustaría usar, lo que lo convierte en una mala elección para la gente que desea usar más de una fuente.

Copia y pega el script JS que encuentras ahí, y pégalo en el archivo header.php de tu tema justo después de la etiqueta de apertura &lt;head&gt;.

Pensamientos finales

Aprender a usar las fuentes de Google en WordPress es un ingenioso truco para tener en el bolsillo, ya que te permite mantenerte en el juego A cuando se trata de estilo.

De nuevo, si tienes problemas con uno de estos fragmentos de código, intenta cambiar las comillas simples "por comillas dobles".

Otro recordatorio es minimizar la cantidad de fuentes y estilos que añades a tu sitio. Sólo usa las que sepas que planeas usar ya que al añadir más se ralentizará tu sitio, haciendo que tener scripts inactivos en tu código sea un desperdicio. Si tu sitio ya está atascado por servidores lentos, asegúrate de leer la guía de Nick sobre cómo elegir el mejor alojamiento de WordPress para tu sitio.

¡Déjanos saber qué método prefieres para añadir las fuentes de Google a tu sitio de WordPress!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *