Cómo saber qué fuentes usa un sitio web

Si alguna vez ha visto un sitio web particularmente atractivo y se ha preguntado cómo ver qué fuentes usa un sitio web, la respuesta es tan simple como abrir el inspector de su navegador. Cada bit de un sitio web se interpreta en su navegador. Así, si sabes utilizar correctamente el inspector de tu navegador no solo podrás averiguar las fuentes sino también las imágenes que tiene, las propiedades CSS de cualquier otro elemento que se encuentre en la página.

En esta publicación, veremos cómo usar el inspector del navegador Chrome para encontrar qué fuentes usa un sitio web e incluso cómo comenzar a jugar con ellas. Pero primero, te explicaré cómo acceder a él y qué funciones tienes disponibles en el inspector.

Acceder al Inspector de Chrome

Si utiliza el navegador Chrome y desea inspeccionar un sitio web, lo primero que debe hacer es acceder a la ventana del inspector. Hay varias formas de hacer esto:

• Presionando la tecla F12, o
• Al hacer clic con el botón derecho en un elemento determinado y en el menú que se abre, acceda a la opción Inspect . La ventaja de este método es que resalta directamente el elemento en cuestión, o
• Presionando la combinación de teclas Control + Shift + I (en Windows) o Cmd + Alt + I (en Mac), o
• Accediendo al menú de Chrome (3 puntos en la barra superior derecha) » Más herramientas » Herramientas para desarrolladores.

La ventana del inspector se puede mostrar integrada en la ventana del navegador o mostrarse en una ventana separada. Para acceder a estas opciones puedes hacerlo haciendo clic en el icono de configuración (3 puntos) en la parte superior derecha del inspector y cambiando el valor de la propiedad «Dock Side».

También tienes la opción de ver el contenido de la página en modo vista de computadora o como si lo estuvieras viendo en un dispositivo móvil. Haz clic en el segundo botón del lado izquierdo de la barra superior del inspector y verás como automáticamente se mostrará el contenido como si accedieras desde un dispositivo móvil.

También puedes indicar el tipo de dispositivo en el que quieres que se muestre, el tamaño o si quieres que se muestre en modo vertical u horizontal.

Pestañas principales del inspector

Como habrás visto, el inspector se compone de diferentes pestañas.

Desde cada uno de ellos tendrás acceso a diferentes funcionalidades y características:

• Elementos : muestra el código HTML de la página, así como los estilos que se le aplican. también puede modificarlos y agregar nuevas reglas rápidamente.
• Consola : muestra los diferentes mensajes de error y advertencia que se producen en la página (imágenes que no cargan, errores de javascript,…)
• Fuentes : muestra el árbol de recursos de la página. Puedes ver de dónde se obtienen los diferentes recursos y modificarlos.
• Red : muestra las diferentes solicitudes realizadas desde la web, accediendo al contenido de la solicitud, la respuesta obtenida, tiempos…
• Rendimiento : muestra los procesos que se están ejecutando y sirve para medir el rendimiento de la página.
• Memoria : muestra la memoria consumida durante la carga y ejecución de la página web.
• Aplicación : muestra información útil sobre los recursos utilizados por una aplicación web.
• Seguridad : muestra información sobre los diferentes sitios a los que se accede desde la página y sus respectivos certificados.
• Auditorías : le permite generar un informe de auditoría para verificar errores.
• Hay complementos que agregan pestañas y funcionalidad al inspector, por lo que puede haber más pestañas. En la imagen anterior se muestra que tenemos instalado el plugin Redux DevTools .

Ficha Elementos

Volvamos ahora al tema que nos ocupa: queríamos saber la fuente de cualquier contenido de una página web.

Como te comentaba antes, desde la pestaña Elementos puedes acceder al código HTML y a los estilos de los diferentes elementos de la página en la que te encuentras.

Como puedes ver en la imagen de arriba, a la izquierda tienes la ventana principal que te muestra el código fuente. Y a la derecha tienes el panel de reglas de estilo CSS que se están aplicando a los diferentes elementos de la página.

De hecho, en el panel de estilos tienes tres pestañas:

• Estilos : muestra las reglas CSS aplicadas y puedes modificarlas y agregar nuevas.
• Calculado : muestra todas las reglas aplicadas al elemento, con un panel que representa los bordes, margen y relleno del elemento.
• Event Listeners : muestra el árbol de eventos que se han lanzado en la página y los controles afectados por ellos.

Ver los detalles de un artículo

Entonces, por ejemplo, si vas a nuestra página principal de Nelio Software, seleccionas las palabras Nelio Software del título y haces clic derecho para inspeccionar qué elemento es, el inspector se abre y te muestra la imagen de arriba.

En la imagen del inspector, puedes ver que la ventana principal me dice que el estilo del título “Nelio Software” es h1 .

En esta misma ventana, tienes la opción de hacer clic derecho sobre cualquier atributo o texto y modificarlo o eliminarlo. Obviamente, cualquier cambio que hagas aquí no cambiará el contenido original, pero es precisamente una herramienta muy útil cuando estás diseñando páginas y quieres tener una idea de cómo se ve cualquier cambio que hagas.

Ver la fuente

Ahora ya sabes que es un titular, pero ¿qué pasa con la fuente?

Pues muy sencillo, en la pestaña Calculado del inspector encontrarás todas las propiedades del elemento seleccionado. Desplácese hacia abajo hasta el atributo de familia de fuentes y allí encontrará exactamente la fuente que tiene el título de nuestro sitio web.

Y si tienes curiosidad sobre cómo se vería ese elemento si quisieras cambiar la fuente, vas a la pestaña Estilos , bajas al atributo font-family y puedes modificarlo directamente con el valor que quieras.

Verás automáticamente tu sitio web con el tipo de fuente cambiado

Como ves, el inspector de Google Chrome es una herramienta muy cómoda y fácil de usar para jugar y probar el diseño que te queda después de aplicar cualquier modificación a un elemento.

¿Qué pasa con la fuente de una imagen?

El inspector de Google Chrome, como has visto, te permite ver las propiedades de cualquier elemento de tu página. Pero si lo que quieres ver es la fuente de una imagen en un sitio web, no podrás ver esto con el inspector. El inspector te mostrará las propiedades de la imagen como tal insertada en tu página pero no te mostrará los detalles del contenido de esa imagen.

Para ello, existen algunas herramientas, como Font Squirrel Matcherator o Whatfontis.com, que pueden ayudarte a identificar la fuente utilizada en una imagen. Para ello, en ambas herramientas deberás descargar la imagen (en whatfontis.com también puedes indicar la URL de la imagen) y luego seleccionar la parte de la imagen que contiene la letra que quieres identificar.

Ambas herramientas le mostrarán un conjunto completo de fuentes que coinciden aproximadamente con el texto seleccionado. Pero si sospecha que esto no es una coincidencia exacta, puede buscar en Google fuentes similares a las indicadas por la herramienta y verá lo que obtiene.

Imagen destacada de Gemma Evans en Unsplash.