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

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: comprobar manualmente el CSS con los inspectores del navegador (avanzado)

La mayoría de los navegadores web le permiten encontrar fácilmente las fuentes utilizando 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 normalmente necesitará pasar por varios estilos para encontrar el que se está aplicando. Como regla general, los estilos que se tachan se sobrescriben, así que busque siempre los que se aplican en último lugar.

Todos los estilos de la página se enumeran en la pestaña Estilo , pero si usa la pestaña Calculado 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 a las que se hace referencia (que no pertenecen al sistema).

Este segundo método es más lento, pero el uso del inspector puede brindarle una gran perspectiva sobre la forma en que 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 desarrollo 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á procesando en realidad; solo muestra la pila de fuentes que se está aplicando; la fuente real que se está procesando 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 Fuente.
2. Haga clic en cualquier tipo que desee identificar. Repetir.
3. Para desactivar Fount, simplemente haga clic en el bookmarklet nuevamente.

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

Me encanta la extensión del navegador Chrome CSSViewer . Simplemente haga clic en él y coloque 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. Le permite a un usuario analizar la información de fuente de cualquier elemento en una página, copiar cualquier parte de esa información al 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 formularios de páginas web.