platimageb

Agregando tipografía de Google Fonts a nuestro Child Theme de Genesis Framework

Agregando tipografia de google fonts a un child theme

Vídeo 

 

Seguramente en más de una ocasión has querido cambiar la tipografía que traen por defecto los child themes de Genesis para que coincida con tu marca y no has sabido como.

En este post te mostrare como hacerlo de una manera muy fácil.

 Agregar la tipografía desde ajustes del tema

Primero vamos a google fonts y escogemos  la tipografía a utilizar, luego en embed copiamos el link :

 

Ahora en nuestro sitio web, en Genesis/ Ajustes del tema en la parte superior pegamos el código y guardamos:

 

Listo, ahora puedes ir a tu archivo css y buscar la clase a la cual le vas agregar la tipografía en mi caso sería  :

.home-cta .widget-title {
font-family: 'Playball', cursive;
}

Esta es una solución fácil pero no es la adecuada, solo la recomiendo para hacer pruebas.

 Agregando tipografía desde function.php, la manera optima

Lo primero que vamos a hacer es buscar el archivo function.php en nuestra instalación, en mi caso estoy trabajando en modo local:

mamp/htdocs/executive/wp-content/themes/escutive-pro

 

Abrimos el archivo function.php, estoy ocupando el tema executive pro el cual ya trae integrada una tipografía :

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'executive_load_scripts' );
function executive_load_scripts() {
wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );

}

Para cambiar la tipografía y agregar la que nosotros queramos quedaría algo a si :

wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Playball', array(), CHILD_THEME_VERSION );

Listo, guardamos el documento y ya podemos utilizar la tipografía .

Ahora agregaremos dos tipografías, para eso no es necesario  escribir todo el cogido :

 

Quedaría algo así :

wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Calligraffitti|Playball', array(), CHILD_THEME_VERSION );

Y listo tenemos las tipografías listas para ocuparlas.

Si tu tema no incluye soporte para agregar la tipografía a continuación te dejo el código base únicamente para copiar y pegar :

//* Enqueue scripts
add_action( 'wp_enqueue_scripts', 'mi_tipogra' );
function mi_tipogra() {
wp_enqueue_style( 'minimum-google-fonts', 'tipografia de google', array(), CHILD_THEME_VERSION );

}


 

Espero que este tutorial te haya servido, si tienes alguna duda y/o sugerencia por favor házmelo saber.

 

 

comparte este post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email