Los Google Fonts en WordPress son la mejor solución para mejorar el rendimiento de un sitio web, mejorando así la velocidad de carga del mismo, tal y como lo explique en un artículo sobre optimización.
Si bien esta solución puede servir para otras plataformas CMS, nos concentraremos en la solución en WordPress, por lo que la explicación al pie de la letra funciona ahí, aunque da luces a cómo puedes implementarlo en el CMS que usas. A continuación están los pasos para hacerlo.
Aplicar los Google Fonts en WordPress
Existen dos formas para obtener Google Fonts en WordPress. Aquí te explico dos: por CSS o por Plugin. Además te explicaré como acoplarlo con el diseño AMP.
Mediante HTML
Ingresa a Google Fonts y explora las opciones que te ofrece. Elige la o las fuentes que crees funcionen con el diseño de tu sitio web. Puedes elegir entre varias opciones: con o sin serifa, gruesas, con mono espacio y «hand-writting» (aquellas que parecen escritas a mano). Después de elegir las fuentes, elige opciones de estilo y caracteres adicionales.
Después de esto te aparecerá un código para embeber la fuente. Copialo y agrégalo en header.php dentro de la etiqueta <head>. Antes de proceder, no olvides hacer un back up por si algo sale mal, aunque es poco probable porque realmente es un procedimiento muy sencillo.
Otra forma es usando el wp_enquenue_style. Para hacerlo, debes agregar en functions.php con el siguiente código. Recuerda cambiar el enlace de la fuente por la que usarás. Aquí ya está resaltada en rojo.
function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Lato:300,400,400i', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );
Usando un plugin
La opción menos compleja es usando un plugin, aunque no es recomendable si ya usas muchos (recuerda que entre más plugins tengas, más pesada harás el sitio web). Yo recomiendo Easy Google Fonts, aunque hay otros plugins que puedes usar.
Después de instalar y activar el plugin, lo que debes hacer es ir a «Personalizar» y de ahí elegir «Tipografía». Ahí puedes elegir las fuentes que usarán y ver cómo se ven en tiempo real. Una vez las selecciones, tu sitio web correra las fuentes desde Google y ya no las cargará de tu sitio web, aunque dejará por fuera a la versión AMP de tu sitio web.
Cómo acoplar Google Fonts en AMP
Cargar Google Fonts en WordPress desde su versión AMP es en realidad bastante sencillo y requiere solo de unos pasos adicionales.
Lo primero que debes hacer es ingresar al plugin AMP for WordPress, luego a Design y por último Global. Ahí encontrarás una opción que dice «Typography» la cual debes activar. Posteriormente se abrirán unas casillas, la primera de ellas Google Font API Key la cual será con la primer aque trabajemos.
El plugin te indica ingresar a la página de Google Fonts, sin embargo desde ahí no vamos a obtener una API Key sin obtener unas credenciales por parte de Google. Así que mejor ingresa en la página de Developers y crea una clave simplemente dando click en «Create Credentials» y luego en «API Key».
Una vez creada, dale click en el botón «Edit» y cambia los campos que te indico a continuación:
– Name: Ponle un nombre para identificar la llave. Puede ser «Fuentes de mi sitio»
– Application Restrictions: Elige HTTP Refers (Web Sites)
– Accept requests from these HTTP referrers (web sites) : Aunque ese dice «opcional», es mejor que pongas el sitio web con el cual usarás la llave.
– API Restrictions: Elige «Web fonts developer API»
Luego de hacer estos cambios, guarda, copia la llave y regresa al Plugin de AMP. Ese código lo copiarás en la casilla «Google Font API Key» y le darás verificar. Una vez el plugin acepta la llave, podrás elegir cualquiera de las fuentes que desees usar. Procura verlas primero en la página de Google Fonts para tener claro cuál usarás. Después de eso dale guardar y ya la versión AMP de tu sitio usará por defecto la Google Font que elegiste.
Te recomiendo visitar la entrada de este blog en donde hay otras opciones para implementar Google Fonts en WordPress. Está en inglés pero es una guía mucho más completa.
Contrata una consultoría en Posicionamiento Web
Dale un impulso a tu proyecto web. Identifiquemos juntos oportunidades para mejorar tu visibilidad en buscadores.