• Ir a navegación principal
  • Ir al contenido principal
  • Github
  • Codepen
  • Twitter
  • Instagram

Eduardo Santillana

  • Tutoriales
  • Blog
  • Info
  • Contacto
Inicio / Tutoriales / Genesis Framework / Google Fonts en Genesis Framework

Google Fonts en Genesis Framework

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:

Google Fonts en Genesis - Eduardo Santillana

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.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la Política de privacidad * for Click to select the duration you give consent until.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

© 2021 · Eduardo Santillana · Graphic & Web Designer
© 2021 · Eduardo Santillana
Graphic & Web Designer

Github · Codepen · Twitter · Instagram · Política de privacidad
Github · Codepen
Twitter · Instagram · Política de privacidad

Esta web usa cookies con objetivos estadísticos. Asumo que estás de acuerdo, pero también puedes no estarlo.AceptarPolítica de privacidad