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 preguntaron 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 Google Web Fonts 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. Ir Fuentes de Google y navegar por la biblioteca. Cuando encuentre la fuente que le gusta, haga clic en el «Uso rápido» botón.
Después de hacer clic en el botón de uso rápido, será redirigido a una nueva página. Desplácese hacia abajo hasta que vea el cuadro de instrucciones con el código que puede agregar a su sitio web.
Verá que hay tres pestañas diferentes para agregar fuentes a su sitio. La primera es la forma estándar y recomendada de 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 utilizar cada uno de estos métodos y cuáles son los pros y los contras.
Suscríbete a TrucosWP
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 archivo y pegue el código de carácter que obtuvo 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 caracteres en una. Así es como lo haría:
@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, combine al menos varias solicitudes en una.
Método de optimización del rendimiento para agregar fuentes web de Google
La mejor manera de agregar fuentes de Google 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 que obtuvo en el paso 1. Si está agregando más caracteres, puede combinar los dos caracteres con un | personaje. Luego ingrese el código en la sección principal del tema.
Lo más probable es que necesite editar su archivo header.php y pegar el siguiente código en la parte superior de su hoja de estilo principal. El ejemplo se vería así:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen"> <link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Básicamente, el objetivo es obtener la solicitud de fuente lo antes posible. De acuerdo a Blog de fuentes web de Google, 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 haya descargado el archivo de fuente.
Una vez que haya hecho eso, simplemente puede comenzar a usarlo en el archivo CSS de su tema así:
h1 {
font-family: 'Oswald', Helvetica, Arial, serif;
}
Ahora existen muchos marcos temáticos y temas secundarios. NO se recomienda modificar los archivos del tema principal, especialmente si está utilizando un marco temático porque los cambios se sobrescribirán la próxima vez que actualice ese marco. Deberá usar los ganchos y filtros presentados por ese tema o marco principal para agregar correctamente las fuentes de Google en sus temas secundarios.
Cola adecuada de fuentes de Google en WordPress
Otra forma de agregar fuentes de Google a su sitio de WordPress es agregar la fuente en el archivo functions.php de su tema o en un plugin 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', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
No olvide reemplazar el enlace de la fuente con el suyo.
Cargando fuentes de Google usando JavaScript
Para este método, deberá copiar el código en la pestaña JavaScript en la sección Instrucciones de Google Fonts. Puede pegar este código en el archivo header.php del tema o del tema hijo justo después de la etiqueta
.Nuestro consejo final sobre el uso de Google Web Fonts en su sitio sería no cargar fuentes que no utilizará. Por ejemplo, si solo desea un peso regular y en negrita, no agregue todos los demás estilos.
Esperamos que este artículo le haya ayudado a agregar Google Web Fonts 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.
¿Te ha resultado útil??
0 / 0