Cómo saber qué fuentes usan un sitio web

Si alguna vez ha visto un sitio web muy atractivo y se ha preguntado cómo ver qué fuentes usa un sitio web, la respuesta es tan simple como la apertura de su inspector de navegador. Cada fragmento de sitio web se reproduce en su navegador. Por lo tanto, si sabe cómo usar el inspector de su navegador correctamente, puede encontrar no solo las fuentes, sino también las imágenes, las propiedades CSS de cualquier otro elemento encontrado en la página. En esta publicación, veremos cómo usar el inspector de navegador Chrome para encontrar qué fuentes usan un sitio web e incluso cómo comenzar a jugar con ellas. Pero primero, explicaré cómo acceder a él y qué características tiene disponibles en el inspector.
Vaya al inspector de Chrome si usa el navegador Chrome y desea inspeccionar un sitio web, lo primero que debe hacer es acceder a la ventana del inspector. Hay varias maneras de hacer esto:
Presionando la tecla F12 o
Al hacer clic en un elemento en particular y en el menú abierto, vaya 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 control de la tecla de control + Shift + I (en Windows) o CMD + Alt + I (en Mac) o
Acceso al menú Chrome (3 puntos en la barra superior derecha) »Varias herramientas» Herramientas de desarrolladores.
La ventana del inspector se puede mostrar integrada en la ventana del navegador o que se muestra en una ventana separada. Para acceder a estas opciones, puede hacer esto haciendo clic en el icono de configuración (3 puntos) en la parte superior derecha del inspector y cambiando el valor de la propiedad del “lado del muelle”.

En el lado del muelle, puede cambiar la visualización de la ventana del inspector. Tenga la opción de ver el contenido de la página en modo de vista por computadora o como si lo vea en un dispositivo móvil. Haga clic en el segundo botón en el lado izquierdo de la barra superior y verá cómo se mostrará automáticamente el contenido como si acceda a él desde un dispositivo móvil.
Seleccione cómo mostrar el contenido de la página.

También puede indicar el tipo de dispositivo que desea mostrar, tamaño o si desea mostrarlo en modo de retrato o paisaje.
Definición del modo de pantalla receptivo y horizontal en un dispositivo móvil.

Las pestañas principales del inspector, como habrá visto, el inspector consta de diferentes pestañas.
Pestañas disponibles en Google Inspector. De cada uno de ellos tendrá acceso a diferentes características y características:

Elementos: Muestre el código HTML de la página, así como los estilos que se aplican. También puede cambiar nuevas reglas de manera rápida y rápida.
Consola: Muestre diferentes mensajes de error y advertencia que aparecen en la página (imágenes que no cobran, errores de JavaScript, …)
Fuentes: Muestra el eje de recursos para la página. Puede ver dónde se obtienen los diferentes recursos y puede cambiarlos.
Red: Muestre las diferentes solicitudes hechas desde el sitio, acceda al contenido del contenido, la respuesta obtenida, The Times …
Rendimiento: Mostrar procesos que se ejecutan y sirven 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 los certificados respectivos. Publica: le permite generar un informe de auditoría para verificar los errores.
Hay complementos que agregan pestañas y características al inspector, por lo que puede haber varias pestañas. En la imagen anterior, se muestra que instalé el complemento Rodux DevTools.
La pestaña Elementos volvamos al problema ahora: queríamos saber la fuente de cualquier contenido en una página web.
Como se mencionó anteriormente, en la pestaña Elementos puede acceder al código HTML y los estilos de los diferentes elementos en la página donde está.
La pestaña Elementos del Inspector de Google Chrome. Como puede ver en la imagen de arriba, a la izquierda tiene la ventana principal que le muestra el código fuente. Y a la derecha, tiene el panel de reglas de estilo CSS que se aplica a los diferentes elementos de la página. De hecho, en el panel de estilo tiene tres pestañas:

Estilos: Muestre las reglas CSS aplicadas y puede modificar y agregar otras nuevas.

Calculado: Muestre todas las reglas aplicadas al elemento, con un panel que representa los bordes, bordes y llenando el artículo.
Oyentes de eventos: muestran el eje de eventos que se lanzaron en la página y los controles afectados por ellos.
Vea los detalles de un artículo, por ejemplo, si accede a nuestro software NELI principal, seleccione las palabras del software NELI en el título y haga clic derecho para inspeccionar el elemento, el inspector abre que le muestra la imagen de arriba.
Captura de pantalla del sitio web de software Neli. En la imagen del Inspector, puede ver que la ventana principal me dice que el estilo de título “No Software” es H1. En la misma ventana, tiene la opción de hacer clic derecho en cualquier atributo o texto y modificarlo o eliminarlo. Obviamente, cualquier cambio que realice aquí no cambiará el contenido original, pero es solo una herramienta muy útil al diseñar páginas y desea tener una idea de qué cambios realiza. Edite el texto de un elemento en una página . Mira la fuente ahora sabes que es un título, pero ¿qué pasa con la fuente?
Bueno, muy simple, en la pestaña Computadora del Inspector encontrará todas las propiedades del artículo seleccionado. Desplácese hacia abajo hasta el atributo de fuente-familia y allí encontrará exactamente la fuente que tiene el título de nuestro sitio.

Fuente aplicada al elemento seleccionado.

Y si tiene curiosidad por saber cómo se vería ese elemento si quisiera cambiar la fuente, vaya a la pestaña Estilos, descienda al atributo de fuentes-familias y puede cambiarla directamente al valor deseado.
Cambiar la fuente del título al inspector.

Verá automáticamente su sitio web con tipo de fuente modificado
Página con la fuente de título cambiada. Como puede ver, el Inspector de Google Chrome es un muy cómodo y fácil de usar para jugar para jugar y probar el diseño que le dejaría después de aplicar cualquier cambio.

¿Pero la fuente de una imagen? El Inspector de Google Chrome, como ha visto, le permite ver las propiedades de cualquier elemento en su página, pero si desea ver la fuente de una imagen en un sitio web, no podrá ver esto con el Inspector. El inspector le mostrará las propiedades de la imagen como tal en su página, pero no le mostrará los detalles de esa imagen. Para hacer esto, hay algunas herramientas, como Font Squirrel Matcherator o WhatFontis.com, que pueden ayudarlo a identificar la fuente utilizada en una imagen. Para hacer esto, en ambas herramientas debe descargar la imagen (en WhatFontis.com también puede indicar la URL de la imagen) y luego seleccionar la parte de la imagen que contiene la letra que desea identificar. Los instrumentos lo mostrarán Todo el conjunto de fuentes que coinciden aproximadamente con el texto seleccionado. Pero si sospecha que esta no es una coincidencia exacta, puede buscar en Google Fonts similares a las indicadas por la herramienta y verá lo que obtiene. Imagen presentada de Gemma Evans en Unsplash.