¿Sabes cómo agregar correctamente Google Fonts en temas de WordPress? Google Fonts es un recurso gratuito para diseñar páginas web. En este artículo, Ayuda Hosting les mostrará cómo agregar correctamente Google Fonts en temas de WordPress, sin que esto interfiera con el rendimiento de las páginas web.
También te puede interesar nuestra guía de plugins para modificar la tipografía en WordPress.
También puede que te interese conocer los 5 mejores creadores de páginas para WordPress.
Índice
Encontrar las Google Fonts que deseamos
Lo primero que haremos es encontrar la fuente de Google que necesitamos o la que más nos guste. Luego nos dirigimos a las Google Fonts y navegamos por la biblioteca de fuentes. Cuando encontremos la fuente que queremos, hacemos clic en Uso rápido. Para efectos de nuestro ejemplo seleccionaremos las fuentes Lora y Oswald.
Una vez que hemos hecho clic en Uso rápido, aparecerá una nueva página emergente. Nos desplazamos hacia abajo hasta que veamos un cuadro de instrucciones de uso donde nos mostrarán un código que agregaremos a nuestro sitio web.
Seguidamente veremos que existen tres pestañas diferentes para agregar la fuente a nuestro sitio. La primera es el método Estándar y recomendado para agregar fuentes de Google a nuestro sitio. La segunda pestaña utiliza el método @import CSS, y la última pestaña utiliza el método JavaScript.
Agregar fuentes web de Google en temas de WordPress
La forma más sencilla de añadir fuentes de Google es abrir el archivo style.css de nuestro tema y pegar el código de las fuentes que obtuvimos de la pestaña @import, de la siguiente manera:
@import url(https://fonts.googleapis.com/css?family=Lora); @import url(https://fonts.googleapis.com/css?family=Oswald);
También podemos combinar varias solicitudes de fuentes en una sola. Así es como lo haríamos:
@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);
Si por alguna razón tenemos que usar @import, combinaremos varias solicitudes en una. Este método es muy sencillo, pero no es la mejor forma de añadir fuentes de Google a nuestro sitio de WordPress. El uso de este método (@import) bloquea las descargas en paralelo, lo que significa que el navegador esperará a que el archivo importado termine de descargar antes de comenzar a descargar el resto del contenido.
Método de rendimiento optimizado para agregar Google Fonts
La mejor forma de añadir fuentes de Google es a través del procedimiento estándar que emplea el método de enlace en lugar del método de importación. Simplemente tomamos la URL de la fuente que hemos obtenido en el primer paso. Si estamos agregando varias fuentes, podemos combinar ambas fuentes separándolas por la barra vertical (|). Luego, colocamos el código en la sección principal de nuestro tema.
Lo más probable es que tengamos que editar nuestro archivo header.php y pegar el siguiente código sobre nuestra hoja de estilo principal. En este caso se vería así:
<link rel="stylesheet" type="text/css" href="http://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 poner la solicitud de fuente al principio. Según el blog de Google Web Fonts, si existe una etiqueta de script antes de la línea @font-face, el navegador Internet Explorer no mostrará nada en la página hasta que el archivo de la fuente se haya descargado.
Una vez que hayamos hecho eso, podremos comenzar a usarlo en el archivo CSS de nuestro tema de la siguiente manera manera:
h1 {
font-family: 'Oswald', Helvetica, Arial, serif;
}No se recomienda modificar los archivos de nuestro tema principal especialmente si estamos empleando un marco de tema. Esto es porque nuestros cambios quedarán anulados la próxima vez que actualicemos ese marco. Debemos emplear los filtros que nos presenta ese tema o marco principal para agregar fuentes de Google correctamente en los temas secundarios.
Colocando correctamente Google Fonts en WordPress
Otra manera de añadir fuentes de Google a nuestro sitio de WordPress es colocando la fuente en el archivo functions.php de nuestro tema o en un complemento específico del sitio.
Nota: no debemos olvidar reemplazar el enlace de la fuente con el de nuestro sitio.
Cargar Google Fonts con JavaScript
Para este método, debemos copiar el código en la pestaña JavaScript en la sección de instrucciones de uso de las fuentes de Google. Podemos pegar este código en nuestro tema o en el archivo header.php del tema secundario inmediatamente después de la etiqueta <head>.
Otro consejo sobre el uso de las fuentes web de Google para nuestro sitio sería no cargar las fuentes que no usaremos. Por ejemplo, si solo deseamos la negrita y el estilo normal, no debemos agregar todos los demás estilos.
Esperamos que este artículo sobre cómo agregar correctamente fuentes de Google en temas de WordPress, les haya resultado útil. Más información sobre este y otros temas en Ayuda Hosting.
