Una de las formas más efectivas de personalizar el aspecto visual de tu sitio web es a través de la tipografía. Con Google Fonts, tienes acceso a una amplia variedad de fuentes gratuitas y de alta calidad para darle un toque único a tu sitio web basado en el Child Theme de Genesis Framework. En este artículo, te mostraré cómo introducir Google Fonts en tu Child Theme y cómo utilizar un snippet de código para lograrlo.
En primer lugar, debes registrar la función que cargará las fuentes de Google en tu Child Theme de Genesis Framework. Si no sabes dónde o cómo colocar estos fragmentos de código puedes leer el tutorial cómo añadir a WordPress donde lo explico en detalle.
function my_custom_google_fonts() {
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Font1|Font2|Font3', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_custom_google_fonts' );
Reemplaza «Font1|Font2|Font3» en la URL del enlace con las fuentes de Google que deseas utilizar. Puedes encontrar y seleccionar las fuentes que desees desde el sitio web de Google Fonts (https://fonts.google.com/). Asegúrate de separar las fuentes con el símbolo «|» para cargar varias fuentes.
Guarda los cambios en el archivo y sube el archivo actualizado a tu Child Theme de Genesis Framework.
Ahora que has registrado las fuentes de Google, es hora de aplicarlas a los elementos de tu sitio web. Puedes hacerlo agregando el siguiente código CSS personalizado a tu Child Theme, en el archivo «style.css» o en el área de personalización de CSS:
body {
font-family: 'Font1', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Font2', serif;
}
p {
font-family: 'Font3', cursive;
}
Asegúrate de reemplazar «Font1», «Font2» y «Font3» con los nombres de las fuentes que seleccionaste previamente.
Conclusión
Al introducir Google Fonts en tu Child Theme de Genesis Framework, puedes personalizar fácilmente la tipografía de tu sitio web y mejorar su aspecto visual. Mediante el uso del snippet de código proporcionado, puedes registrar las fuentes de Google y aplicarlas a los diferentes elementos de tu sitio web.
Recuerda que puedes experimentar con diferentes combinaciones de fuentes y ajustar el código CSS según tus preferencias. ¡Diviértete personalizando la tipografía de tu sitio web y dale un toque distintivo con Google Fonts en tu Child Theme de Genesis Framework!
