¿Cómo agregar fuentes de Google a WordPress? ¡4 métodos fáciles!

¿Quieres personalizar la tipografía de tu sitio web? Has venido al lugar correcto. En esta guía, le mostraremos diferentes métodos para agregar Google Fonts a su sitio de WordPress paso a paso .

De forma predeterminada, los temas de WordPress vienen con algunas fuentes específicas y cuando publica contenido, estas fuentes se muestran en la interfaz. Sin embargo, a veces es posible que desee utilizar una fuente personalizada en su sitio para darle la apariencia perfecta para su marca. ¡Es por eso que hoy le mostraremos cómo incluir Google Fonts en su sitio !

¿Por qué agregar Google Fonts a WordPress?

La fuente que utiliza tiene un gran impacto en su sitio. Por un lado, afecta el diseño de su sitio web y su apariencia. La fuente es una de las primeras cosas que ven los visitantes cuando visitan su sitio, por lo que debe coincidir con el estilo de su negocio. Por otro lado, también puede tener un impacto en la experiencia del usuario. Por ejemplo, si la fuente es difícil de leer, sus visitantes tendrán problemas para encontrar lo que buscan y abandonarán su sitio. Por lo tanto, tener la fuente correcta no solo hará que su sitio se vea mejor, sino que también mejorará la experiencia de los usuarios .

Por eso te recomendamos encarecidamente que utilices una tipografía fácil de usar que transmita la esencia de tu negocio. Hay varios servicios de fuentes como Typekit de Adobe y Friconix. Sin embargo, el mejor que existe es Google Fonts, un servicio gratuito con miles de familias de fuentes que están listas para integrarse con su sitio web.

Y la mejor parte es que agregar Google Fonts a WordPress es bastante fácil y solo toma 5 minutos. Hay varias formas de hacerlo.

Métodos para agregar Google Fonts a su sitio de WordPress

Existen diferentes métodos para incluir Google Fonts en WordPress:

1. Uso de complementos
2. Editando el archivo functions.php
3. A través de Style.css
4. Editando el archivo header.php

Todas estas opciones hacen el trabajo, así que elija la que mejor se adapte a sus habilidades y necesidades. Antes de que analicemos más de cerca cada uno de estos métodos, debe verificar si su tema viene con la integración de Google Fonts.

Comprobar la integración de fuentes de Google

La mayoría de los temas de WordPress vienen con un panel temático dedicado. A partir de ahí, los usuarios pueden personalizar todo el tema sin escribir ningún código. Algunos temas como GeneratePress vienen con soporte integrado de Google Fonts. Esto significa que no necesita usar complementos o códigos personalizados para integrar las fuentes. Esto puede ahorrarle algo de tiempo y facilitarle las cosas.

Si usa un tema que viene con la integración con Google Fonts, puede realizar cambios en la tipografía de su sitio desde el panel de temas o el personalizador de WordPress. Entonces, antes de comenzar con el proceso para incluir Google Fonts en tu sitio, te recomendamos verificar si tu tema ya viene con Google Fonts .

Ahora, echemos un vistazo a cada método para agregar Google Fonts a su sitio de WordPress.

1) Uso de complementos

Una de las formas más fáciles de agregar Google Fonts a WordPress es usar un complemento. Uno de los mejores que hay es Google Fonts Typography. Esta es una herramienta gratuita que te ayudará a incluir Google Fonts en tu sitio sin escribir una sola línea de código.

Primero, instale y active el complemento en su sitio web.

Después de eso, vaya a Complementos y verifique la configuración del complemento.

Cuando haga clic en él, será redirigido al personalizador de WordPress.

A partir de ahí, puede tomar el control de la tipografía de su sitio web. Verá cuatro configuraciones principales:

• Ajustes básicos
• Ajustes avanzados
• Carga de fuentes
• depuración

Echemos un vistazo a lo que ofrecen tanto la configuración básica como la avanzada.

Ajustes básicos

Desde la sección de tipografía básica, puede elegir su familia de fuentes predeterminada para el cuerpo, el encabezado y los campos de entrada.

Desde el menú desplegable debajo de cada sección de Familia de fuentes , podrá elegir cualquiera de los cientos de fuentes de Google. Si conoce la fuente que desea, simplemente escríbala usando la función de búsqueda.

Para este tutorial, usaremos la fuente Work Sans. Después de elegir una fuente del menú desplegable, los cambios se reflejarán instantáneamente y verá la vista previa en vivo con la nueva fuente. Además de eso, podrá especificar un peso y estilo de fuente personalizados.

Una vez que termines, publica los cambios.

Ajustes avanzados

En Configuración avanzada , puede elegir la familia de fuentes para su marca, navegación, contenido, barra lateral y pie de página.

Esta es una gran característica si planea usar diferentes fuentes en diferentes partes de su sitio web. Después de seleccionar una fuente del menú desplegable, publique los cambios.

La versión gratuita de Google Fonts viene con funciones limitadas, pero también hay una versión premium disponible que comienza en 29 USD para un sitio.

Esta versión pro lo ayudará a configurar cosas como el tamaño de la fuente, el color , la optimización y los elementos personalizados. Es una excelente opción si desea tomar el control de todas sus opciones de tipografía. Por otro lado, si no quieres gastar dinero en esto, puedes hacer estos cambios usando un poco de CSS.

2) Edite el archivo functions.php

Otra opción para agregar fuentes de Google a su sitio de WordPress es editar el archivo functions.php . Antes de seguir adelante con este método, asegúrese de estar utilizando un tema secundario. Si no sabe cómo hacerlo, puede leer sobre cómo crear un tema secundario o usar un complemento de tema secundario.

Para este método, puede editar directamente el archivo functions.php o usar un complemento. Si es un principiante, le recomendamos que use el complemento Code Snippets para agregar un código personalizado a su sitio. En esta guía, utilizaremos fragmentos de código.

NOTA : Vale la pena señalar que si usa fragmentos de código, no necesita crear un tema secundario. Sin embargo, siempre recomendamos tener uno.

Entonces, para editar functions.php usando Code Snippets, primero, instale y active el complemento.

Luego, vaya a la configuración de los complementos. Desde allí, puede agregar un nuevo fragmento a su sitio.

Seleccione una fuente

En una nueva pestaña, abra Google Fonts y seleccione una familia de fuentes para usar en su sitio web. Puede usar la función de fuente de búsqueda en el sitio o simplemente navegar. En nuestro caso, utilizaremos la familia Lato.

Una vez que haya seleccionado una fuente, irá a la página de la fuente. Verá la opción de vista previa donde puede probar la fuente antes de agregarla a su sitio. Después de eso, seleccione los estilos que desea usar. Por ejemplo, vamos a elegir los estilos Regular y Negrita .

Puede revisar sus selecciones en el panel derecho.

Después de agregar los estilos, está listo para incrustarlos en WordPress. Para hacer eso, copie el enlace de la familia de fuentes desde la pestaña Incrustar .

Agrega la fuente a tu sitio

Ahora, copie el siguiente fragmento y péguelo en el complemento Code Snippets.

 <?php
función wpb_add_google_fonts() {
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap', false );
   }
   
   add_action('wp_enqueue_scripts', 'wpb_add_google_fonts');
?>

Asegúrese de reemplazar la URL de la fuente con las fuentes que ha seleccionado.

Después de eso, guarde el fragmento y actívelo. ¡Ha agregado con éxito Google Fonts a su sitio de WordPress !

Si no desea utilizar un complemento para esta tarea, simplemente pegue el código anterior en el archivo functions.php de su tema secundario utilizando un cliente FTP.

Aplicar la nueva fuente

Después de eso, puedes aplicar la nueva fuente con un poco de CSS. Por ejemplo, para editar la fuente del cuerpo, puede agregar el siguiente código a la sección CSS adicional en el personalizador.

 cuerpo {
familia tipográfica: 'Lato', sans-serif;
} 

Después de publicar el cambio, verás cómo cambia la fuente del cuerpo. Como está utilizando el personalizador, verá inmediatamente los cambios en la sección de vista previa.

Si necesita modificar cualquier otro elemento en su sitio, debe modificar el código anterior y especificar los elementos que desea cambiar y la familia de fuentes. Por ejemplo, si desea cambiar todos los encabezados h3 a la nueva fuente, debe escribir algo como esto:

 h3 { 
familia tipográfica: 'Lato', sans-serif; 
}

De esta manera, podrá agregar familias de fuentes de Google ilimitadas y personalizar su sitio de WordPress.

3) Personaliza el estilo.css (@import)

Otra forma de agregar Google Fonts a WordPress es a través del archivo style.css . Esta vez, en lugar de usar códigos PHP, editará el archivo style.css del sitio web para agregar nuevas familias de fuentes.

Seleccione la fuente

Primero, vaya a Google Fonts y seleccione las que desea usar en su sitio. En la sección Incrustar , seleccione el modo @import .

Agrega la fuente a tu sitio

Ahora, el panel le mostrará un código CSS único. Simplemente copie el código y péguelo en el CSS adicional en su tablero de WordPress.

Luego, presione el botón Publicar .

Aplicar la nueva fuente

Después de eso, puede decidir dónde desea aplicar la nueva fuente. Por ejemplo, hemos elegido la fuente Kufam en cursiva, así que para modificar la fuente del cuerpo, usa el siguiente código CSS:

 cuerpo {
familia tipográfica: 'Kufam', cursiva;
}

Como puede ver, la sección de vista previa en vivo se actualiza automáticamente y muestra los cambios.

De manera similar, si desea aplicar la nueva fuente a todos los encabezados h2, el código que debe usar es:

 h2 { 
familia tipográfica: 'Kufam', cursiva; 
}

Este es otro método muy simple que incluso los principiantes pueden usar. Y lo bueno es que no necesitas complementos.

4) Edite el archivo header.php

El cuarto método para agregar fuentes de Google a su sitio de WordPress es editar el archivo header.php . Anteriormente hemos visto cómo editar el encabezado en WordPress, por lo que si ha leído esa publicación, esto será fácil. No se preocupe si no lo ha hecho. En esta sección, le mostraremos cómo incluir nuevas fuentes. Aunque implica un poco de codificación, es bastante simple incluso para principiantes.

Para esto necesitarás:

• El enlace de la fuente de Google
• La ruta a su archivo style.css

Veamos cómo conseguir cada uno de ellos.

Obtener el enlace de la fuente de Google

El enlace de la fuente se puede obtener del sitio web de Google Fonts. Busque la fuente que planea usar y selecciónela.

En la barra de direcciones, verá la URL de la fuente.

Obtener la ruta style.css

Ahora, veamos cómo encontrar la ruta style.css . Si tiene acceso a cPanel, inicie sesión en el panel de control de su sitio y abra el administrador de archivos. En la carpeta wp-content , verá una carpeta llamada themes . Ahí es donde viven todos sus temas instalados. Antes de seguir adelante, debe saber cuál es el tema activo de su sitio web.

Puede encontrar su tema activo en la sección Apariencia en el panel de control de WordPress.

Por ejemplo, en nuestro caso, es Twenty-Twenty.

En el cPanel, iremos a wp-content > themes > twentytwenty.

En el panel izquierdo, verá la ruta a los archivos de su tema. Cópialo.

Siguiendo nuestro ejemplo, obtuvimos algo como esto: public_html/wp-content/themes/twentytwenty . Ahora, todo lo que necesita hacer es eliminar la parte public_html , agregar el nombre de dominio allí y mencionar el archivo /style.css al final del código. Entonces, el nuevo código será algo como esto www.example.com/wp-content/themes/twentytwenty/style.css .

Cuando abra la URL en su navegador, se cargará el archivo style.css . Si obtiene una página de error 404, significa que la ruta a su archivo style.css es incorrecta.

Agregue el enlace de Google Font y style.css al encabezado

Una vez que tenga el enlace de la fuente y la ruta style.css, todo lo que necesita hacer para agregar fuentes de Google a su sitio de WordPress es copiar el código de abajo y pegarlo en el archivo header.php de temas .

 <link href="https://fonts.googleapis.com/css2? family= Oxygen & display=swap" rel="stylesheet">
<enlace rel = "hoja de estilo" type = "text/css" href = "http://yoursite.com/wp-content/themes/yourtheme/style.css" media = "all" >

Recuerde reemplazar la URL con su fuente y cambie la ruta a su estilo.css con la suya propia.

Si no se siente cómodo modificando el archivo header.php , puede usar el complemento Insertar encabezados y pies de página para agregar el código. Veamos cómo usar esta herramienta.

Cambiar header.php con un complemento

Primero, instale y active Insertar encabezados y pies de página en su sitio.

Después de eso, vaya a Configuración > Insertar encabezados y pies de página .

Verás tres bloques allí.

• Encabezamiento
• Cuerpo
• Pie de página

Como agregará el código a la sección del encabezado, pegue el código anterior con la URL de su fuente y la ruta style.css en la sección Scripts en el encabezado . Luego, recuerda guardar los cambios.

Puede dejar las secciones de cuerpo y pie de página vacías, ya que no hará ningún cambio allí.

El código que acaba de pegar irá justo encima de la etiqueta </head> . Si no está utilizando el complemento, asegúrese de pegar el código HTML en la sección <head> . De lo contrario, ¡no funcionará!

¡Eso es todo, ha completado la integración y ha agregado Google Fonts a su sitio!

Consejos de Google Fonts Pro

Agregar Google Fonts a su sitio es solo el primer paso. Después de eso, le recomendamos que consulte algunos de nuestros consejos profesionales que lo ayudarán a optimizar su sitio aún más.

Aloje Google Fonts localmente

Google Fonts es una biblioteca en línea que contiene muchas fuentes gratuitas. Cuando utilice su servicio para incrustar fuentes en su sitio, enviará solicitudes a sus servidores y obtendrá el contenido solicitado. Si el servidor de Google Fonts enfrenta problemas técnicos, eso también puede afectar el rendimiento de su sitio web.

Para deshacerse de ese problema, puede considerar alojar las fuentes en su servidor local. Si hace esto, no necesitará enviar solicitudes externas adicionales. Sin embargo, tenga en cuenta que eso puede consumir los recursos de su servidor.

Habilitar la captación previa de DNS

La mayoría de los complementos de almacenamiento en caché de WordPress vienen con una función llamada captura previa de DNS. La idea es que cuando envíe solicitudes HTTP externas, su sitio web se volverá más lento. Para solucionarlo, puede usar la función de búsqueda previa de DNS que le permite ingresar URL externas que puede obtener para reducir las solicitudes externas.

Aquí hay un ejemplo de la sección de búsqueda previa de DNS del complemento WP Rocket.

Todo lo que tenemos que hacer es escribir el dominio de Google Fonts en la sección URL para obtener previamente y guardar los cambios.

Límite de pesos de fuente

Para personalizar las fuentes, puede utilizar los pesos de fuente. Hay muchas opciones de peso de fuente disponibles, tales como:

• Delgado
• Extra ligero
• Ligero
• Regular
• Medio
• Semi-negrita
• Audaz
• Extra-negrita
• Negro

Normalmente, los sitios usan el peso de fuente Regular y Negrita para los títulos. Por lo tanto, cuando seleccione estilos, elija solo los estilos que planea usar. De lo contrario, agregar pesos adicionales al servidor que no usará dará como resultado un aumento de las solicitudes HTTP.

Conclusión

Con todo, si agrega Google Fonts a WordPress, podrá personalizar la tipografía de su sitio. No solo su sitio web se verá mejor, sino que también brindará a sus clientes una mejor experiencia.

Hemos visto diferentes métodos para hacer esto:

1. Con complementos
2. A través del archivo functions.php
3. A través de Style.css
4. Editando el archivo header.php

Entonces, ¿qué método debería usar? Todos harán el trabajo, por lo que depende de sus habilidades y preferencias. Si no se siente cómodo con la codificación, le recomendamos que utilice el método del complemento. Google Fonts Typography es muy fácil de usar y será una gran adición a su sitio web. Sin embargo, si no desea agregar más complementos a su sitio, puede editar el archivo functions.php de su tema utilizando el complemento Code Snippets o a través de FTP. Además, el método style.css @import es otra forma rápida y fácil de agregar Google Fonts con unas pocas líneas de código CSS. Alternativamente, también puede agregar la URL de su fuente y la ruta style.css al archivo header.php .

Si te ha gustado este artículo, compártelo con tus amigos en las redes sociales. Para obtener publicaciones más interesantes para mejorar su sitio, consulte nuestra sección de blog.

¿Qué método piensa utilizar? ¿Conoce alguna otra? ¡Háganos saber en la sección de comentarios!