Fuentes de una web: descubre la pila de fuentes declarada
SuperchargeInspect identifica las fuentes de una web a partir de su texto. Muestra la pila font-family declarada, el tamaño, el peso y la altura de línea, y los copia con un clic.
Actualizado el
Ag
- Ink
- Amber
- Paper
Ves una tipografía en un sitio y quieres saber su nombre, así que buscas cómo identificar las fuentes de una web a partir de su texto. Apunta al texto y la sección Typography muestra la familia tipográfica que declara la página, con su tamaño, peso e interlineado. Esa es la pila de fuentes declarada, no una comprobación de qué fuente renderizó realmente el navegador. SuperchargeInspect lee el texto real de la página para que puedas ver y copiar los estilos de una sola vez.
Qué muestra un buscador de fuentes de una web
Cuando inspeccionas los estilos de fuente de una página, la sección Typography te da el conjunto completo. Apunta a cualquier texto y se abre con la familia tipográfica. Muestra como etiqueta la primera familia de la lista. Haz clic en esa etiqueta para copiar font-family y toda la pila de fuentes declarada pasará a tu portapapeles.
El dato Size muestra el tamaño de fuente con el interlineado después de una barra, como 16 / 24, y con un clic copias ambos a la vez como 16px / 24px. Weight es un valor aparte y Tracking muestra el espaciado entre letras.
La sección también incluye una muestra tipográfica renderizada con la propia fuente del elemento, a modo de vista previa visual. Es una vista previa de cómo se ve el texto, no una comprobación de qué fuente usó el navegador. Lees los valores y luego haces clic en los que quieras.
Pila declarada, no la fuente renderizada
Una pila de fuentes es una lista de familias que la página solicita, en orden. La primera familia es la que intenta usar primero. Si esa no está disponible, el navegador baja por la lista. Esa lista es lo que contiene un valor font-family.
SuperchargeInspect te muestra esa lista. No comprueba qué familia terminó usando el navegador. Así que, si la primera familia no se cargó y el navegador recurrió a otra, la etiqueta sigue mostrando la primera familia. Un buscador de fuentes de una web te muestra el valor declarado, no el resultado renderizado.
Solo lee el texto real de la página. No lee fuentes de imágenes.
Copiar la fuente
Puedes copiar la fuente de varias formas. La etiqueta Family muestra la primera familia, y al copiar obtienes la lista completa.
| Dónde | Qué obtienes |
|---|---|
| Etiqueta Family en Typography | La primera familia de la pila |
| Haz clic en Family | La pila de fuentes declarada completa |
| Copy text only o Copy reference | La pila completa, indicada como declaración, no como fuente renderizada verificada |
| Pie del PNG de referencia | La primera familia |
La pila completa es el valor que realmente vas a usar. Pégala en tu propio CSS como font-family y el navegador resolverá las familias en el mismo orden en que las indicaba la página.
Teclado
Pulsa Alt+Shift+E para empezar. Muévete entre elementos con las flechas. Mantén pulsado Ctrl y presiona Arriba o Abajo para pasar al elemento padre o a un hijo. En macOS, es Option en lugar de Ctrl. Pulsa Enter para fijar el elemento en el que estás y Esc para volver a seleccionar o cerrar el panel. Pasar al elemento padre o a un hijo resulta útil cuando el texto está dentro de un elemento anidado pequeño al que cuesta apuntar con el ratón.
Privacidad
SuperchargeInspect no hace llamadas de red y no requiere cuenta. La pila solo sale de tu dispositivo cuando tú mismo la pegas en algún sitio.
Consulta también los colores y el espaciado con el inspector de CSS.
Preguntas frecuentes
¿Qué fuente usa esta web?
¿Puede identificar una fuente a partir de una imagen o una captura de pantalla?
¿Qué se copia al hacer clic en la familia de fuentes?
¿Muestra el tamaño, el peso y el interlineado?
¿Envía datos de la página a alguna parte?
Funciones relacionadas
Muestra a tu herramienta de IA para programar el elemento exacto que quieres cambiar
Señala el elemento, añade una nota y copia una referencia con una captura de pantalla anotada y los estilos observados; luego pégala en la herramienta de IA para programar que ya usas.
Inspector CSS para cualquier elemento: consulta y copia los valores CSS
Un inspector de CSS que te permite ver el CSS de cualquier elemento de una web. Consulta la fuente, los colores, el espaciado y el modelo de caja, y copia los valores CSS a tu portapapeles.
Color hex de una web: encuentra el código hex de cualquier elemento
Inspecciona los colores de una web en cualquier página en vivo. Señala el elemento y su sección Colors muestra los colores del texto, del fondo y del borde. Un clic copia el código hex.