WordPress: Trucos semanales

Cómo usar tipografías de Google Fonts en nuestra web

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
WordPress como herramienta de gestión y creación se ha convertido por méritos propios es una completa solución de desarrollo de proyectos digitales que puedes adaptar a prácticamente todo tipo de necesidades. En esta serie semanal, dedicada por completo al desarrollo de proyectos digitales empleando WordPress, verás un amplio surtido de trucos, técnicas y plugins variados con los que podrás añadir nuevas posibilidades a todos nuestros proyectos orientados al mundo web. De esta forma conseguirás ahorrar tiempo y los esfuerzo necesarios para dar con ellos, aportándonos nuevos conocimientos de aplicación directa desde el primer momento.
06:06
  Añadir a marcadores

Transcripción

No hace falta ser un lince para darse cuenta de la infinidad de opciones tipográficas que tenemos disponibles en la actualidad, y no me estoy refiriendo solo al diseño gráfico más puro, sino también a todo el espectro digital. Si bien hace unos años siempre teníamos un ojo puesto en las novedades y otro puesto siempre que en lo que considerábamos recursos seguros y lo más compatibles posibles, lo cierto es que actualmente disponemos de una carta mucho más variada de elementos con los que poder darle una aspecto personalizado a nuestros proyectos "online". Centrándonos en el aspecto tipográfico, podemos citar, por ejemplo, la increíble biblioteca de tipos disponibles en Google Fonts y que en el vídeo de hoy vamos a ver lo fácil que es poder empezar a utilizarla directamente en nuestros proyectos WordPress sin apenas dificultad. Puede que hayas utilizado en alguna ocasión ya este recurso tipográfico, pero no te hayas animado a probarlo directamente. Si te animas, lo hacemos ahora mismo. Para poder empezar a utilizar las diferentes tipografías que tenemos disponibles dentro de Google Fonts, lo primero que tenemos que hacer es evidentemente dirigirnos a la página donde las tenemos disponibles. Además, hace unas semanas, el equipo de diseño de Google modificó completamente el aspecto, la interfaz de Google Fonts; yo creo que antes estaba bien, pero ahora está muchísimo mejor, es mucho más fácil navegar y poder visualizar las diferentes opciones que tenemos disponibles. Podemos ver aquí cuáles son las tipografías destacadas, podemos emparejarlas a ver qué tal quedan dentro del directorio, podemos modificar rápidamente el contenido para ver cómo queda. Podemos hacer muchísimas cosas: modificar el tamaño, modificar si tuviesen diferentes pesos lo que podemos hacer, ver cómo quedaría completamente todo el alfabeto para ver todos los caracteres que tenemos disponibles. Pero, bueno, ¿cómo podemos empezar a incorporarlo? Muy fácil, vamos a hacerlo empleando un tema hijo. En este caso, yo tengo un tema hijo ya creado. El tema padre sería'Twentysixteen', que es el viene por defecto actualmente en WordPress. He creado un tema hijo llamado'Twentysixteen-child' y dentro de la carpeta de este tema hijo, pues, solo tengo dos archivos: el archivo de funciones y el archivo de estilos. Los había usado anteriormente para poder heredar todos los estilos y reglas creadas en la hoja de estilo del tema padre. Y, bueno, también como alternativa, en vez de este'import'podía cargar las hojas de estilo, en este caso el'style. css'del tema padre. Estas dos opciones que estamos viendo en pantalla realmente ahora mismo están haciendo lo mismo, podríamos eliminar la del archivo de funciones y no pasaría absolutamente nada. Lo que voy a hacer es emplear la opción del'import' también dentro de la hoja de estilos para incorporar las tipografías de Google. Para ello voy a volver a la web y voy a escoger alguna de las tipografías que en este caso me gustase. Como estamos de ejemplo, vamos a probar la Baloo Bhai. Para seleccionarla, lo único que tengo que hacer es hacer clic en este icono para poder seleccionarla. Me fijo que me ha salido aquí un pequeño mensaje, voy a desplegarlo y aquí tengo las diferentes opciones para cargar la tipografía dentro de mi proyecto. Puedo enlazarla dentro del etiquetado "head" del archivo del "template" que tenga dentro de WordPress. También tengo la opción de Import incluida también dentro del "head". Pero lo que voy a hacer es coger este elemento, vamos a quedarnos con la URL y vamos a incorporarla dentro de la hoja de estilos. Ya vemos que podemos hacerlo de muchas opciones diferentes. Voy a pegarlo aquí, voy a dejarlo de manera temporal, voy a copiar este'import'que tengo aquí, voy a pegarlo y la URL, pues, evidentemente voy a usar la de Google. Vamos a pegarlo aquí, vamos a hacer todo correctamente cerrando bien los paréntesis, viendo que no me sobre nada. Aquí tengo este paréntesis y este punto y coma que me sobran. Con esto ya estaría haciendo la llamada a los servidores de Google para cargar esta tipografía, pero, bueno, ahora tengo que empezar a usarla. ¿Y eso cómo lo hago? Bueno, pues, mediante una regla de CSS. Podría, por ejemplo, emplearla en los encabezados h1 h2, h3, creo una nueva regla y digo que la familia en este caso sea Baloo Bhai. Vamos a escribirlo: 'Baloo Bhai'. Vamos a poner las comillas simples por si acaso. Y bueno, como "fallback" en vez de también usar la Baloo Bhai, pues, podríamos poner Arial, Helvética... las que nosotros quisiéramos. Con esto, todos los etiquetados que tuviésemos de elementos h1, h2 o h3 en primer lugar usarían la tipografía de Google. Vamos a guardar, vamos a dirigirnos temporalmente a la parte pública, porque si recargamos, en principio no vamos a ver ningún tipo de cambio. Esto es así porque aunque este es un elemento de encabezado. Vamos a comprobar cómo sería el código, vemos que es un h1 pero tiene una clase asociada, con lo cual va a prevalecer por jerarquía. Con lo cual, vamos a quedarnos con que'entry-title' vamos a modificarla, vamos a poner en vez de los encabezados, la clase, guardamos, y ahora recargamos para ver qué es lo que ocurriría. Vamos a recargar y ya tenemos aquí nuestra tipografía de Google Fonts aplicada de una manera muy sencilla, muy rápida. Simplemente hemos tenido que ir a Google Fonts, seleccionarla, quedarnos con la URL para poder cargarla, incluirla dentro de nuestra hoja de estilos y simplemente crear una nueva regla dentro de nuestro'style. css'.