Las fuentes de Google son un recurso gratuito increíble para los diseñadores web. En WPBv4, comenzamos a usar una combinación de fuentes populares de Google: Oswald y Lora. Algunos de nuestros usuarios nos han preguntado cómo agregar fuentes web de Google en temas de WordPress. Si recuerda, le mostramos cómo agregar fuentes de Google en el Editor de publicaciones de WordPress. En este artículo, le mostraremos cómo agregar fuentes web de Google en sus temas de WordPress en el La direccion correcta, optimizado para el rendimiento.
Encuentra las fuentes web de Google que te gustan
Contents
Lo primero que debe hacer es encontrar una fuente de Google que le guste. Dirígete a Google Fonts y navega por la biblioteca. Cuando encuentre la fuente que le gusta, haga clic en el botón «Uso rápido» botón.
Una vez que haga clic en el botón de uso rápido, será llevado 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.
Verá que hay tres pestañas diferentes para agregar la fuente a su sitio. La primera es la forma estándar y recomendada de agregar Google Fonts a su sitio. La segunda pestaña usa el método CSS @import y la última pestaña usa el método JavaScript. Le mostraremos cómo utilizar cada uno de estos métodos y cuáles son los pros y los contras.
Video tutorial
Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.
Agregar fuentes web de Google en temas de WordPress
En su mayoría, hemos visto personas que utilizan los dos primeros métodos. La forma más sencilla sería abrir tu tema. style.css archiva y pega el código de las 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 políticas en una. He aquí cómo hacerlo: @import url (https://fonts.googleapis.com/css?family=Lora|Oswald); Este método es muy simple, 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 finalice la carga del archivo importado antes de comenzar a descargar el resto del contenido. Si DEBE usar @import, combine al menos varias consultas en una.
Método para optimizar el rendimiento de agregar fuentes web de Google
La mejor manera de agregar Google Fonts es usar el método estándar que usa el método de enlace en lugar del método de importación. Simplemente tome la URL de su fuente obtenida en el paso 1. Si está agregando más de una fuente, puede combinar las dos fuentes con un | personaje. Luego, coloque el código en la sección principal de su tema. Probablemente necesitará editar su archivo header.php y pegar el siguiente código sobre su hoja de estilo principal. El ejemplo se vería así:
Básicamente, el objetivo es presentar la solicitud policial lo antes posible. Según el blog de Google Web Fonts, si hay una etiqueta de secuencia de comandos antes de la declaración @ font-face, Internet Explorer no representará nada en la página hasta que se complete la descarga del archivo de fuente. Una vez que haya hecho eso, puede comenzar a usarlo en el archivo CSS de su tema de esta manera: h1 {font-family: ‘Oswald’, Helvetica, Arial, serif; } Ahora hay muchos marcos temáticos y temas secundarios. NO se recomienda modificar los archivos de su tema principal, especialmente si está utilizando un marco de tema, ya que sus cambios se sobrescribirán la próxima vez que actualice este marco. Deberá utilizar los corchetes y filtros que le presenta ese tema o marco principal para agregar correctamente las fuentes de Google a sus temas secundarios.
Poner en cola correctamente las fuentes de Google en WordPress
Otra forma de agregar Google Fonts a su sitio de WordPress es poner la fuente en cola en el archivo functions.php de su tema o en un complemento específico del sitio. function 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’);
Recuerde reemplazar el enlace de la fuente con el suyo.
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 Google Fonts. Puede pegar este código en el archivo header.php de su tema o tema hijo inmediatamente después etiqueta. Nuestro consejo final sobre el uso de Google Web Fonts en su sitio sería no cargar fuentes que no vaya a utilizar. Por ejemplo, si solo desea que la grasa y el grosor sean normales, no agregue todos los demás estilos. Esperamos que este artículo le haya ayudado a agregar fuentes web de Google a sus temas de WordPress de la manera correcta, para que su sitio se cargue rápidamente. También puede consultar nuestra guía sobre cómo agregar fuentes Typekit en WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-25 09:32:46.
