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.
