Cómo agregar fuentes web de Google en temas de WordPress de la manera “correcta”

Las fuentes de Google son un recurso gratuito increíble para diseñadores web. En WPBv4, comenzamos a usar una combinación popular de fuentes de Google: Oswald y Lora. Algunos de nuestros usuarios nos han preguntado cómo agregar fuentes web de Google en los temas de WordPress. Si recuerdas, mostramos cómo agregar fuentes de Google en WordPress Post Editor. En este artículo, le mostraremos cómo agregar fuentes web de Google en sus temas de WordPress. Manera correcta, optimizado para el rendimiento.


Encuentra las fuentes web de Google que te gustan

Lo primero que debe hacer es encontrar una fuente de Google que le guste. Dirígete a las fuentes de Google y navega por la biblioteca. Cuando encuentre la fuente que le gusta, haga clic en el “Uso rápido” botón.

Fuentes de uso rápido de Google Fonts

Una vez que haga clic en el botón de uso rápido, se lo dirigirá a una nueva página. Desplácese hacia abajo hasta que vea el cuadro de instrucciones de uso con el código que puede agregar a su sitio web.

Código de inserción de fuente de Google

Verá que hay tres pestañas diferentes para agregar la fuente a su sitio. El primero es el método estándar y recomendado para agregar fuentes de Google a su sitio. La segunda pestaña usa el método @import CSS, y la última pestaña usa el método JavaScript.

Le mostraremos cómo usar cada uno de estos métodos y cuáles son sus ventajas y desventajas..

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Agregar fuentes web de Google en temas de WordPress

La mayoría de las veces hemos visto personas usando los dos primeros métodos.

La forma más fácil sería abrir el tema style.css archiva y pega el código de fuentes que obtuviste en la pestaña @import, así:

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

También puede combinar varias solicitudes de fuente en una. Así es como lo harías:

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

Este método es muy fácil, pero no es la mejor manera de agregar fuentes de Google a su sitio de WordPress. El uso del método @import bloquea las descargas paralelas, lo que significa que el navegador esperará a que el archivo importado termine de descargarse antes de comenzar a descargar el resto del contenido..

Si DEBE usar @import, entonces al menos combine múltiples solicitudes en una.

Método de rendimiento optimizado para agregar fuentes web de Google

La mejor manera de agregar fuentes de Google es mediante el método estándar que utiliza el método de enlace en lugar del método de importación. Simplemente tome la URL de la fuente que obtuvo del paso 1. Si está agregando varias fuentes, puede combinar las dos fuentes con un | personaje. Luego, coloque el código en la sección principal de su tema.

Lo más probable es que tengas que editar tu archivo header.php y pegar el siguiente código sobre tu hoja de estilo principal. El ejemplo se vería así:

Básicamente, el objetivo es poner la solicitud de fuente lo antes posible. Según el blog de Google Web Fonts, si hay una etiqueta de script antes de la declaración @ font-face, Internet Explorer no mostrará nada en la página hasta que el archivo de fuente haya terminado de descargarse.

Una vez que haya hecho eso, simplemente puede comenzar a usarlo en el archivo CSS de su tema de esta manera:

h1 {
Familia tipográfica: ‘Oswald’, Helvetica, Arial, serif;
}

Ahora hay muchos marcos temáticos y temas secundarios por ahí. NO se recomienda modificar los archivos de su tema principal especialmente si está utilizando un marco de tema porque sus cambios se anularán la próxima vez que actualice ese marco. Tendrá que utilizar los ganchos y filtros que le presenta ese tema o marco principal para agregar fuentes de Google correctamente en sus temas secundarios.

Colocando correctamente las fuentes de Google en WordPress

Otra forma de agregar fuentes de Google a su sitio de WordPress es colocando la fuente en el archivo functions.php de su tema o un complemento específico del sitio.

función wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, falso);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

No olvides reemplazar el enlace de la fuente por el tuyo.

Carga de fuentes de Google con JavaScript

Para este método, deberá copiar el código en la pestaña JavaScript en la sección de instrucciones de uso de fuentes de Google. Puede pegar este código en su tema o en el archivo header.php del tema secundario inmediatamente después de la etiqueta.

Nuestro último consejo sobre el uso de las fuentes web de Google en su sitio sería no cargar las fuentes que no usará. Por ejemplo, si solo desea el peso en negrita y normal, no agregue todos los demás estilos.

Esperamos que este artículo lo haya ayudado a agregar fuentes web de Google en sus temas de WordPress de la manera correcta, para que su sitio pueda cargarse rápidamente. También puede consultar nuestra guía sobre cómo agregar fuentes Typekit en WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me