Como saber qué tipos de letra usa una web

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

Si alguna vez has visto una web particularmente atractiva y te has preguntado cómo ver qué tipos de letra usa un sitio web, la respuesta es tan simple como abrir el inspector de tu navegador. Cada bit de un sitio web es interpretado en tu navegador. Por lo tanto, si sabes cómo usar tu inspector del navegador correctamente no sólo puedes averiguar las fuentes si no también las imágenes que tiene, las propiedades CSS de cualquier otro elemento que se encuentra en la página.

En esta entrada veremos cómo usar el inspector del navegador Chrome para encontrar qué fuentes utiliza un sitio web, e incluso cómo empezar a jugar con ellas. Pero antes te explicaré cómo se accede y qué funcionalidades tienes disponible en dicho inspector.

Acceder al inspector de Chrome

Si usas el navegador Chrome y quieres inspeccionar una web, lo primero que debes hacer es acceder a la ventana del inspector. Para ello, hay varias formas:

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

La ventana del inspector puede mostrarse integrada en la propia ventana del navegador o mostrarse en una ventana a parte. Para acceder a estas opciones puedes hacerlo pulsando el icono (3 puntitos) de configuración arriba a la derecha del inspector y cambiando el valor de la propiedad «Dock Side».

En Dock side puedes cambiar cómo mostrar la ventana del inspector.
En Dock Side puedes cambiar como mostrar la ventana del inspector.

También tienes la opción de visualizar el contenido de la página en modo vista ordenador o como si estuvieras visualizándolo en un dispositivo móvil. Haz clic en el segundo botón que encuentras a la izquierda de la barra superior del inspector y verás cómo automáticamente se mostrará el contenido como si estuvieras accediendo desde un dispositivo móvil.

Seleccionar el modo de visualización del contenido de la página.
Seleccionar el modo de visualización del contenido de la página.

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

Definiendo el modo de visualización en un dispositivo móvil.
Definiendo el modo de visualización responsive y horizonal en un dispositivo móvil.

Pestañas principales del inspector

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

Pestañas disponibles en el inspector de Google.
Pestañas disponibles en el inspector de Google.

Desde cada una de ellas tendrás acceso a diferentes funcionalidades y características:

  • Elements: muestra el código HTML de la página, así como los estilos que se aplican. También puedes modificarlos y añadir nuevas reglas rápidamente.
  • Console: muestra los diferentes mensajes de error y advertencia que se producen en la página (imágenes que no cargan, errores de javascript, …)
  • Sources: muestra el árbol de recursos de la página. Puedes ver de dónde se obtienen los diferentes recursos y modificarlos.
  • Network: muestra las diferentes peticiones que se realizan desde el sitio web, accediendo al contenido de la petición, la respuesta obtenida, tiempos…
  • Performance: muestra los procesos que se van ejecutando y sirve para medir el rendimiento de la página.
  • Memory: muestra la memoria consumida durante la carga y ejecución de la página web.
  • Application: muestra información de utilidad de los recursos empleados por una aplicación web.
  • Security: muestra información sobre los diferentes sitios a los que se accede desde la página y sus certificados respectivos.
  • Audits: te permite generar un informe de auditoria para para comprobar errores.
  • Hay plugins que añaden 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.

Pestaña Elements

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

Como ya te he comentado antes, desde la pestaña Elements accedes al código HTML y a los estilos de los diferentes elementos que hay en la página en la que te encuentras.

Pestaña Elements del inspector de Google Chrome.
Pestaña Elements del inspector de Google Chrome.

Como ves en la imagen anterior, a la izquierda tienes una ventana principal que te muestra el código fuente. Y a la derecha tienes el panel de las reglas de estilo CSS que se están aplicando a los distintos elementos de la página.

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

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

Ver los detalles de un elemento

Así, por ejemplo si te vas a nuestra página principal de Nelio Software, seleccionas las palabras Nelio Software del título y haces clic al botón derecho para inspeccionar de qué elemento se trata, precisamente se abre el inspector mostrándote la imagen que encuentras un poco más arriba.

Captura de pantalla de la web de Nelio Software.
Captura de pantalla de la web de Nelio Software.

En la imagen del inspector, puedes ver que la ventana principal me está indicando que el estilo del título «Nelio Software» es h1.

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

Edita el texto de un elemento de una página.
Edita el texto de un elemento de una página.

Ver el tipo de letra

Ahora ya sabes que se trata de un título pero, ¿y el tipo de letra?

Pues muy sencillo, en la pestaña Computed del inspector encontrarás todas las propiedades del elemento seleccionado. Baja hasta el atributo font-family y allí encontrarás exactamente el tipo de letra que tiene el título de nuestra página web.

Fuente aplicada al elemento seleccionado.
Fuente aplicada al elemento seleccionado.

Y si tienes curiosidad en cómo quedaría ese elemento en caso de querer cambiar el tipo de letra, vas a la pestaña de Styles, bajas al atributo de font-family y lo puedes modificar directamente con el valor que quieras.

Cambiando la fuente del título en el inspector.
Cambiando la fuente del título en el inspector.

Automáticamente verás tu web con el tipo de fuente cambiado

Página con la fuente del título cambiado.
Página con la fuente del título cambiado.

Como puedes ver, el inspector de Google Chrome es una herramienta muy cómoda y fácil de usar para ir jugando y probando el diseño que te quedaría tras aplicar cualquier modificación a un elemento.

¿Y el tipo de letra de una imagen?

El inspector de Google Chrome, como ya has visto, te permite ver las propiedades de cualquier elemento de tu página. Pero si lo que quieres ver es el tipo de letra de una imagen que hay en una web, esto no lo podrás ver con el inspector. Ya que 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 te pueden ayudar a indentificar el tipo de letra utilizado en una imagen. Para ello, en ambas herramientas debes o bien 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 te mostrarán todo un conjunto de fuentes que coinciden con el texto seleccionado de forma muy aproximada. Pero si sospechas que no es una coincidencia exacta, puedes buscar en Google fuentes similares a las que te ha indicado la herramienta y ya verás lo que te aparece.

Imagen destacada de Gemma Evans en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.