Cómo añadir fuentes web de Google en temas de WordPress de la manera "correcta
Las fuentes de Google son un increíble recurso gratuito para los diseñadores web. En WPBv4, hemos empezado a utilizar una popular combinación de fuentes de Google: Oswald y Lora. Algunos de nuestros usuarios nos han preguntado cómo añadir fuentes web de Google en temas de WordPress. Si recuerdas, te mostramos cómo añadir fuentes de Google en WordPress Post Editor. En este artículo, le mostraremos cómo añadir fuentes web de Google en sus temas de WordPress de la manera correcta , optimizada para el rendimiento.
Encuentra las fuentes web de Google que te gusten
Lo primero que tienes que hacer es encontrar una fuente de Google que te guste. Dirígete a las fuentes de Google y navega por la biblioteca. Cuando encuentre la fuente que le gusta, haga clic en el botón "Quickuse" .
Una vez que haga clic en el botón de uso rápido, se le llevará a una nueva página. Desplácese hacia abajo hasta que vea el cuadro de instrucciones de uso con el código que puede añadir a su sitio web.
Verá que hay tres pestañas diferentes para añadir la fuente a su sitio. El primero es el método estándar y recomendado para añadir fuentes de Google a su sitio. La segunda pestaña utiliza el método @import CSS, y la última pestaña utiliza 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
Suscribirse a AprenderWP
Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.
Adición de fuentes web de Google en temas de WordPress
Hemos visto sobre todo a gente usando los dos primeros métodos.
La forma más fácil sería abrir el archivo style.css del tema y pegar el código de las fuentes que obtuvo en la ficha @import, de esta manera:
12@import url(http://fonts.googleapis.com/css?family=Lora);@import url(http://fonts.googleapis.com/css?family=Oswald);
También puede combinar varias solicitudes de fuentes en una sola. Así es como lo harías:
1@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);
Este método es súper fácil pero no es la mejor manera de añadir fuentes de Google a tu sitio de WordPress. El 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 utilizar @import, al menos combine varias incidencias en una.
Método optimizado de rendimiento para añadir fuentes web de Google
La mejor manera de añadir fuentes de Google es utilizando el método estándar, que utiliza el método de enlace en lugar del método de importación. Simplemente toma la URL de la fuente que obtuviste en el paso 1. Si está añadiendo varias fuentes, puede combinar las dos fuentes con un carácter |. A continuación, coloque el código en la sección de cabecera de su tema.
Lo más probable es que tenga que editar su archivo header.php , y pegar el siguiente código encima de su hoja de estilo principal. El ejemplo se vería así:
12 pantalla
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 guión antes de la declaración @font-face, Internet Explorer no mostrará nada en la página hasta que el archivo de fuente se haya descargado.
Una vez hecho esto, simplemente puede empezar a utilizarlo en el archivo CSS de su tema de esta manera:
123h1{ font-family:'Oswald', Helvetica, Arial, serif;}
Ahora hay muchos marcos temáticos y temas infantiles. NO se recomienda modificar los archivos del tema principal, especialmente si está utilizando un marco de trabajo de tema, ya que los cambios se anularán la próxima vez que actualice dicho marco de trabajo. Deberá utilizar los ganchos y filtros que se le presentan en ese tema principal o marco de trabajo para añadir fuentes de Google correctamente en los temas secundarios.
Encolado correcto de fuentes de Google en WordPress
Otra forma de añadir fuentes de Google a tu sitio WordPress es haciendo cola en el archivo functions.php del tema o en un plugin específico del sitio.
123456functionwpb_add_google_fonts() { wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts');
No olvides reemplazar el enlace de fuente con el tuyo.
Carga de fuentes de Google mediante JavaScript
Para este método, deberá copiar el código en la pestaña JavaScript de la sección de instrucciones de uso de fuentes de Google. Puede pegar este código en el archivo header.php de su tema o tema infantil inmediatamente después de la etiqueta.
Nuestro último consejo sobre el uso de las fuentes web de Google en tu sitio sería que no cargues fuentes que no vayas a utilizar. Por ejemplo, si sólo desea el negrita, y el peso normal, entonces no agregue todos los otros estilos.
Esperamos que este artículo le haya ayudado a añadir 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.
Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.
Deja una respuesta