En el siguiente artículo veremos un método sencillo y sobre todo rápido para probar tipografías de Google Fonts en nuestra web mediante la extensión Firebug. Y de este modo poder trabajar el diseño más rápidamente.
En el método que vamos a usar deberemos tener instalada la extensión Firebug, en este caso, para el navegador web Firefox.
Si no tenemos instalada la extensión bastará con teclear en nuestro navegador Firefox la palabra Firebug.
Tras esto accedemos a la web de complementos para Firefox del complemento Firebug y lo instalamos en nuestro navegador.
Posteriormente lo reiniciamos y ya tendremos disponible la herramienta.
Contenido
Seleccionar fuente desde Google Fonts
Bien, vamos a comenzar accediendo a la web de Google Fonts y seleccionamos la fuente que deseemos probar.
Según la fuente es posible que se dispongan de diferentes estilos para el grosor de la fuente, cada uno de ellos con un valor numérico que indicará el grosor del trazo.
Para el ejemplo nosotros seleccionamos la fuente llamada Ruda.
Podemos encontrarla si realizamos la búsqueda desde el mismo google fonts.
Como observamos disponemos de tres estilos diferentes con valores numéricos 400 para el normal, 700 para el bold y finalmente el ultra-bold con valor 900, como podemos ver en la imagen de más abajo.
En nuestra web, pongamos el ejemplo.
Usaremos los tres estilos por lo cual deberemos hacer click en las checkbox que indica cada estilo en google fonts en la tipografía seleccionada y en el apartado 1 que nos indica que seleccionemos los estilos que deseemos.
Bien de este modo, nos generará en el apartado 3 (Add this code to your website) de la misma página el link que indicará que tenemos disponibilidad para usar cualquier de los tres estilos.
Tendrá la siguiente apariencia.
En el link anterior vemos que indica los tres valores numéricos correspondientes al ancho de cada uno de los estilos. De esta forma podremos hacer uso de cualquiera de los estilos y ver de qué modo quedaría dicha tipografía al usarla en nuestro sitio web. El siguiente paso sería seleccionar dicha línea de enlace y la copiamos para posteriormente ver dónde la pegaremos.
Bien, ahora el siguiente paso es activar la herramienta Firebug, desde el icono que se muestra en la parte superior del navegador y que tiene forma de insecto. Veremos que por defecto se nos abre una consola en la parte inferior de nuestro navegador.
También vemos que hay diferentes pestañas en la misma que marcan los siguientes textos, Consola, HTML, CSS, etc.
Por defecto estamos en la de HTML que es en la que debemos estar. Vemos que la consola nos muestra el html que forma nuestra web. Deberemos pues seleccionar la parte del documento HTML que pone head, le damos al símbolo + con la finalidad que despliegue toda la información que allí está guardada.
Pegar el link traído desde Google fonts en el head del documento.
Estando con el puntero sobre el head del documento haremos click derecho. Se nos abre una ventana, debemos seleccionar la opción Pegar HTML y a su vez se nos abrirá otra ventana desplegable que marca el siguiente nivel en la que deberemos seleccionar la opción, como último hijo.
Esto en definitiva lo que hace es pegar el link que hemos copiado desde el google fonts y lo hemos añadido a la información del head en nuestro documento, eso sí, temporalmente, ya que una vez recarguemos la página dicha información ya no estará disponible.
Así que no recarguemos la página mientras no hayamos hecho las pruebas con las tipografías que nos gustan.
Resumiendo, hemos copiado el link de google fonts y lo hemos pegado en el head de nuestro documento html, por lo que ya no tenemos disponible para probar la fuente seleccionada.
Vamos al siguiente paso que es indicar qué elementos deseamos probar con esa tipografía.
Vamos a seleccionar por ejemplo un encabezado del tipo h4. Esto se hace mediante el inspeccionador de elementos de Firefox. En la consola su icono muestra un rectángulo con una flecha señalando el centro. De esta forma al activar dicha función podremos rastrear gráficamente los elementos que conforman nuestro documento html, individualmente y que nos mostrará la información asociada a los mismos, en este caso nos hace falta la información CSS perteneciente al elemento h4 del que estamos hablando.
Si nos fijamos al lado derecho de la consola es dónde se muestra la información CSS. Mediante la herramienta de inspeccionar elemento pinchamos sobre el encabezado en cuestión. Al hacer click inmediatamente al lado derecho se nos muestra la información CSS del elemento h4. Fijémonos que al lado izquierdo, en la información HTML estamos marcando el elemento h4.
Añadir reglas CSS en los elementos que deseemos cambiar la tipografía.
Realizada la comprobación, basta simplemente con hacer click en la última propiedad del elemento h4, en el último valor. Vemos que la casilla se sitúa en modo editable. Hacemos intro desde el teclado con el fin de hacer un saldo de línea y añadir una nueva regla, mediante la que cargaremos la nueva fuente para dicho elemento para ir trabajando el diseño o si trabajamos sobre cualquiera de los mejores temas premium para WordPress.
Añadiremos la siguiente regla:
h4{ /*Reglas anteriores*/ font-family: Ruda; } |
Como podemos ver el título h4 ha cambiado la apariencia y ahora muestra la tipografía que nos hemos traído desde Google Fonts. Fácil, ¿verdad? Recordemos que nos habíamos traído además tres estilos diferentes con valores 400, 700 y 900, vamos pues a probar los diferentes anchos de los que disponemos.
Esto se hace de igual forma añadiendo una nueva regla a nuestro elemento h4, en este caso es font-weight, que tomará los valores anteriormente mencionados.
h4{ /*Reglas anteriores*/ font-family: Ruda; font-weight: 400; } |
Mostrará el estilo font-weight 400 para nuestro h4. Del mismo modo podemos probar con los otros valores para ver cómo cambia el trazo de nuestro h4.
Como hemos visto de una forma rápida podemos realizar pruebas para ver qué tipografía nos gusta más en nuestra web si hemos decidido cambiarla o simplemente estamos en el desarrollo del sitio web y queremos cargar diferentes por la razón que sea.
Recordad que mientras no recargues la página o cerrar el navegador esos datos los tendréis disponibles.
Si lo deseáis también podéis ver el siguiente vídeo en el que toda esta parrafada se ve de una forma más amena. 😉
Finalmente deciros que si os ha gustado el post o el vídeo estáis invitados a compartirlo por las redes sociales. Gracias por vuestro tiempo y un saludo.