¿Cómo puedo saber qué fuentes está usando un sitio web?

¿Cómo puedo saber qué fuente o fuentes está usando un sitio web? ¿Hay herramientas o extensiones de navegador que puedan facilitar el trabajo?

Opción 1: usar una extensión de navegador (Fácil)

Las extensiones como WhatFont (disponible para Chrome, Firefox y Safari) facilitan la detección de familias de fuentes de cualquier texto en una página web. Solo necesita instalar la extensión, activarla en un sitio y hacer clic en el elemento que desea inspeccionar. Los resultados se muestran en un cuadro flotante, siempre en el contexto de su elección.

Opción 2: compruebe manualmente el CSS con los inspectores del navegador (avanzado)

La mayoría de los navegadores web le permiten encontrar fácilmente las fuentes usando right-click→ 'Inspeccionar' o 'Inspeccionar elemento'. También se puede hacer presionando F12. Esto mostrará una lista de estilos adjuntos al sitio web, que puede explorar para encontrar las fuentes utilizadas en cualquier elemento HTML.

Usar el inspector no es tan sencillo como usar una extensión, pero tiene varias ventajas. Se requiere cierta comprensión de CSS, ya que generalmente necesitará pasar por varios estilos para encontrar el que se aplica. Como regla general, los estilos que se tachan se sobrescriben, por lo que siempre busque los que se apliquen en último lugar.

Todos los estilos de la página se enumeran en la pestaña Estilo , pero si usa la pestaña Computado en su lugar, puede encontrar las propiedades que se aplican activamente al elemento que ha seleccionado, incluida, por supuesto, la familia de fuentes.

Finalmente, otra forma de verificar rápidamente qué fuentes se están utilizando globalmente (pero NO cómo o dónde) es ir a 'Aplicación → Marcos → Fuentes' . Allí, encontrará una lista de todas las fuentes referenciadas (que no son del sistema).

Este segundo método es más lento, pero el uso del inspector puede brindarle una gran visión de cómo se construye toda la página. Además, muchos diseñadores y desarrolladores lo usan como una herramienta para probar los cambios antes de escribirlos en la hoja de estilo (porque cambiar una línea CSS en el inspector activa una vista previa en tiempo real en el navegador).

El 'elemento de inspección' del navegador no es perfecto

Usar las herramientas de desarrollador de su navegador es una buena manera de ver qué fuentes se declaran en el CSS de un sitio web. Sin embargo, esto no muestra qué fuente se está representando realmente, solo muestra la pila de fuentes que se está aplicando, la fuente real que se representa puede variar según las fuentes instaladas, etc.

Otra herramienta útil es Fount .

Fount le dirá qué fuente web en su pila de fuentes está viendo realmente, no solo lo que se supone que debe verse. También le indicará el tamaño, el peso y el estilo de la fuente.

Usar Fount es tan fácil como agregar un marcador. No es necesario instalar una aplicación ni ninguna extensión.

Después de agregar el marcador:

1. Vaya a cualquier sitio y haga clic en el marcador de Fount.
2. Haga clic en cualquier tipo que desee identificar. Repetir.
3. Para desactivar Fount, simplemente haga clic nuevamente en el marcador.

Fount funciona en Safari, Chrome, Firefox e IE8 +.

Me encanta la extensión del navegador Chrome CSSViewer . Simplemente haga clic en él y desplace el cursor sobre la fuente que desea identificar y le mostrará la familia de fuentes.

FontFinder está creado para diseñadores, desarrolladores y tipógrafos. Permite al usuario analizar la información de la fuente de cualquier elemento en una página, copiar cualquier pieza (s) de esa información en el portapapeles y realizar reemplazos en línea para probar nuevos diseños.

Este complemento es el mejor para encontrar la fuente y otros css, como el peso de la fuente, el tamaño y muchos más sitios web de formularios.