En este tutorial veremos cómo añadir una tipografía de Google Fonts a un child theme de Genesis Framework.
Tipografías de Google Fonts en Genesis
Google Fonts es un directorio interactivo de fuentes de uso libre muy popular compuesto por cientos de tipografías optimizadas para la web. En su catálogo podemos encontrar todo tipo de fuentes, desde clásicas a actuales, que nos permitirán personalizar fácilmente nuestras páginas.
En este tutorial vamos a ver cómo podemos añadir alguna de estas fuentes a child themes creados con Genesis Framework. Para hacerlo tendremos que seguir dos pasos.
El primero será obtener el link de la fuente para poder añadirlo después a nuestra web. El siguiente consistirá en importar ese código, para ello podremos elegir entre dos opciones.
Una será usar el plugin Genesis Extender, un complemento que puede resultar muy útil como explicaremos más adelante, y otra será mediante programación. Esta última opción sólo requerirá de unas pocas líneas de código, ¡vamos a ello!.
Obtener link para importar fuente de Google Fonts
Independientemente de que optemos por usar un plugin o por hacerlo mediante programación, lo primero que tendremos que hacer será obtener el enlace a la fuente que queremos añadir a nuestro sitio.
Para ello tendremos que acceder a Google Fonts y, de entre todas las tipografías disponibles, elegir la/s que queremos incluir pulsando sobre el signo "+".
Elegir fuentes Google Fonts para importar en nuestro sitio
Las fuentes seleccionadas se irán guardando en la ventana "Family Selected" que aparecerá en la parte inferior de la página en cuanto hagamos clic para añadir la primera tipografía.
Cuando terminemos de añadirlas, tendremos que desplegar dicha ventana. Veremos que nos muestra varios apartados, el que nos interesa concretamente es el que se ubica bajo la sección "Embed/Standard", la que se abre por defecto, y que contiene un link que nos servirá para importar las tipografías elegidas a nuestra web.
-
Link para importar las tipografías en Genesis
Un inciso aquí, en el caso de que quisiéramos importar alguna variante específica de esta fuente, debemos ir a la pestaña "Customize" y elegir entre las posibilidades disponibles.
Bien, una vez hecho, tenemos que volver a la sección "Embed/Standard", y copiar el link que aparece bajo la misma para poder usarlo después en nuestro sitio. El siguiente paso será elegir el método con el que queremos importar las nuevas fuentes de Google Fonts.
Vamos a ver dos formas aunque no son las únicas, ya que podríamos por ejemplo incluir las nuevas fuentes añadiendo la directiva "import" en nuestra hoja de estilo. Dicho esto, veremos en primer lugar cómo hacerlo a través de un plugin, y después cómo podemos conseguirlo mediante unas líneas de código.
Opción 1: Añadir nueva tipografía usando un plugin
El plugin que vamos a usar se llama Genesis Extender. Es un plugin premium que nos permite personalizar el diseño de nuestro sitio de forma bastante intuitiva a la vez nos acerca al código, por lo que está dirigido tanto a usuarios de Genesis relativamente nuevos, como a aquellos que quieren adentrarse en el mundo de la programación o mejorar sus habilidades en este ámbito.
Si estáis suscritos a boluda.com podréis bajarlo gratuitamente desde la pestaña "Descargas" de la Intranet, y también acceder a todos los cursos, entre ellos el curso de Genesis, donde se explican todos los apartados del plugin para que podáis sacarle el máximo partido.
Una vez lo tengamos descargado en nuestro equipo, tendremos que instalarlo y activarlo. Para hacerlo, como siempre, nos vamos al escritorio de WordPress, y pulsamos sobre "Plugins/Añadir nuevo", y a continuación en "Subir plugin". Después seleccionaremos el archivo comprimido, pulsaremos sobre "Instalar ahora", y por último en "Activar plugin".
-
Subir plugin Genesis Extender
Una vez instalado y activado, nos aparecerá una nueva opción en el menú de WordPress, "Genesis Extender". Para entrar en la pantalla de configuración que usaremos en este caso, tendremos que hacer clic sobre "Genesis Extender/Settings/General Settings".
Desde esta pestaña podremos modificar varios aspectos de nuestro child theme de Genesis Framework. En concreto nos interesa el apartado que dice "Google Font Control", desde el cual podremos añadir nuevas fuentes de Google Fonts a nuestras plantillas.
Aquí es donde entra en juego el link que copiamos en el punto anterior. Primero tendremos que pulsar en "Google Fonts".
-
Apartado Google Font Control en Genesis Extender
De inmediato se abrirá una ventana donde podremos añadir el enlace mencionado. En concreto tendremos que pegarlo donde dice "Link Code goes here…".
Incluir link Google Fonts en Genesis Extender
Una vez lo tengamos pulsaremos sobre la opción correspondiente según nos interese "sans-serif", "serif" o "cursive". Esto lo que va a hacer es convertir el link que hemos proporcionado en un código que pueda usar Genesis.
Código Google Fonts en Genesis Extender
Después sólo nos quedaría guardar los cambios, y ya lo tendríamos listo. Siguiendo estos sencillos pasos las nuevas fuentes quedarían incluidas y podríamos usarlas en cualquier momento en nuestro código CSS para personalizar nuestra web. Veamos ahora la opción de añadir las tipografías usando código.
Opción 2: Añadir nueva tipografía usando código
Si ya nos manejamos con el código y preferimos realizar estos cambios sin instalar plugins extras, podemos importar la nueva tipografía directamente a nuestro tema añadiendo unas pocas líneas de código PHP.
Como hemos visto en otras ocasiones, estas líneas pueden incluirse de varias formas. En el tutorial sobre añadir código a WordPress tratamos las mismas. En este caso optaremos por usar un plugin de utilidades que creamos anteriormente.
La ventaja de usar este método es que si cambiamos a otro tema no perderemos el código que incluyamos en el plugin ya que es externo a la plantilla, y además seguirá funcionando dado que es válido para otras plantillas de WordPress.
Pues bien, para incluir el fragmento de código que necesitamos para añadir las nuevas tipografías tendremos que acceder a nuestro plugin a través de la herramienta FTP que usemos y, con el desactivado, incluir un código similar al siguiente:
// Añadir tipografía Google Fonts
function bld_incluir_nueva_fuente() {
wp_enqueue_style( 'bld-google-fonts', '//fonts.googleapis.com/css?family=Raleway:400,800', array(), CHILD_THEME_VERSION );
}
add_action( 'wp_enqueue_scripts', 'bld_incluir_nueva_fuente' );
Aquí utilizaremos sólo parte del link que obtuvimos en el primer apartado. Concretamente el que corresponde a la importación de la fuente, es decir tendremos que sustituir el código que aparece en negrita por el que corresponda a la tipografía elegida en nuestro caso, y después guardar y activar de nuevo nuestro plugin.
Y esto es todo, con este pequeño fragmento de código podríamos usar cualquier tipo de letra del directorio de Google Fonts para personalizar nuestra web :)
Resumen y conclusión
En este tutorial hemos visto cómo añadir una nueva tipografía a un child theme de Genesis Framework. El primer paso consiste en elegir la que queremos, seleccionarla, y copiar el enlace que nos permitirá importarla a nuestro sitio. Para hacerlo tenemos varias posibilidades, en concreto vimos dos opciones.
Una es usar el plugin Genesis Extender, el cual recomendamos para nuevos usuarios de Genesis o personas que quieran adentrarse en el mundo de la programación en Genesis. Por cierto, si queréis saber más sobre este plugin lo explicamos a fondo en el curso de Genesis.
La otra opción que vimos fue la de usar código. En este caso, si os interesa aprender a programar podéis echar un vistazo al curso de PHP, y también al curso de Genesis Child Themes.
Ya sabéis que si os suscribís tendréis acceso a plugins y themes premium, a los 3 cursos, y a los 3404 vídeos disponibles en boluda.com. ¡A por ello!