Cuál es la manera correcta de usar Google Fonts en Genesis Framework?

No lo sé, hay muchas, desde importarlas en las CSS hasta hacerlo a través de javascript. Voy a mostrar como lo hago, que de todas las opciones, me parece la más elegante.

Creo que todos sabemos de la importancia que tiene la tipografía en el diseño, y si no, deberíamos leer algún tutorial sobre ello. Sé de muchos diseñadores que lo primero que hacen es seleccionar la tipografía que van a utilizar en un proyecto y en función de ello empiezan a desarrollar los layouts. En mi caso, depende, a veces si y otras no.

Para los que recién empiezan y necesitan un pequeño empujón les dejo el enlace a typespiration.com, es un buen recurso para encontrar combinaciones de fuentes para web, listas para usar.

Al tema. La manera como utilizo Google Fonts en Genesis es a través del archivo functions.php.

Primero selecciono la familia y los pesos de las fuentes (no me gusta esa palabra) que voy a utilizar en Google Fonts. Por ejemplo, he decidido utilizar Roboto Mono en sus pesos 300, 300 italic, 400, 400 italic, 700 y 700 italic.

El link standard que nos da Google Fonts es este:

Ahora copio el siguiente código dentro de mi archivo functions.php insertándole el hipérvínculo sin el https:


// Agregar Google Fonts.
add_action( 'wp_enqueue_scripts', 'edo_add_google_fonts' );
function edo_add_google_fonts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto+Mono:300,300italic,400,400italic,700,700italic' );
}


Si voy a utilizar dos familias, digamos que además de Roboto Mono para el cuerpo de texto quiero usar Lato 700 (bold) para los encabezados, entonces el código a utilizar sería el siguiente:


// Agregar Google Fonts.
add_action( 'wp_enqueue_scripts', 'edo_add_google_fonts' );
function edo_add_google_fonts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto+Mono:300,300italic,400,400italic|Lato:700' );
}


Así de fácil, y sip, así de elegante.