Cómo Encontrar la fuente de una Página Web Mediante la Herramienta Inspeccionar Elementos y las Extensiones del Navegador

Diferentes Fuentes  Diferentes Fuentes  Diferentes Fuentes  Diferentes fuentes

El éxito de su sitio web depende en gran medida de su apariencia. Tener la combinación de colores y el tema correctos mantendrá a sus visitantes en su sitio durante un poco más de tiempo. Además de la paleta de colores y la estructura de su sitio, la fuente que elija también juega un papel esencial para mantener a su audiencia involucrada.

Tal vez te encuentres con un sitio atractivo mientras navegas por la web y quieras saber qué fuentes está usando. Con las extensiones en línea y la herramienta de inspección de elementos integrada de su navegador, identificar una fuente es rápido y fácil.

Cómo Encontrar fuentes Con la Herramienta Inspeccionar elemento

En caso de que no lo supiera, la herramienta integrada Inspeccionar elemento de su navegador le permite examinar el código fuente de un sitio web. Puede comprender los elementos de diseño de un sitio mirando su CSS, HTML y otra información. Es una gran manera de obtener inspiración al diseñar tu propio sitio web.

El proceso de identificación de una fuente con la herramienta Inspeccionar elemento es bastante simple y no necesitará conocimientos de codificación. Esta herramienta está disponible en todos los navegadores del mercado, y cada uno tiene un diseño similar.

Te mostramos cómo identificar una fuente utilizando la herramienta de inspección de tu navegador.

  1. Abra el sitio web que desea utilizar.
  2. Resalte el texto que tiene la fuente que desea identificar y haga clic con el botón derecho en él.
  3. Haga clic en Inspeccionar en el menú contextual.
     Opción de Inspección del navegador Abierta
  4. Cuando se abra el menú Inspeccionar, haga clic en el Computado.
  5. Desplácese hacia abajo para encontrar la sección Familia de fuentes. Aquí, puede encontrar el nombre y el estilo de la fuente, así como sus dimensiones.
    Inspector De Navegador Abierto Con Código Fuente Que Muestra La Familia De Fuentes

Otras formas de usar la herramienta de inspección

Si desea una forma más rápida de encontrar la fuente de un sitio utilizando la herramienta de inspección, pruebe esto:

  1. Abra el sitio web que desea utilizar.
  2. Presione Ctrl + Mayús + C (Cmd + Mayús + C en Mac).
  3. Sitúe el cursor sobre el texto para mostrar el estilo de fuente, el tamaño, el código de color y el margen.
     Cuadro de diálogo Que Muestra los Detalles de la fuente de un texto en Chrome

También puede consultar la lista de fuentes utilizadas en una página web con la herramienta Inspeccionar. He aquí cómo hacer esto:

  1. Vaya a la página web.
  2. Abra el código fuente presionando Ctrl + Mayús + I (Cmd + Mayús + I en Mac).
  3. Haga clic en la ficha Red y, a continuación, seleccione la ficha Fuente.
  4. Aquí, verá una lista de todas las fuentes utilizadas en la página web.
     Lista de Fuentes Utilizadas en el sitio Web Que se muestra en el Inspector del Navegador Chrome

Para obtener la lista de todas las fuentes en tiempo real, es posible que tenga que actualizar la página web.

Cómo identificar fuentes mediante Extensiones de navegador

Si desea una forma más conveniente de identificar una fuente, es posible que desee instalar una extensión de navegador para encontrar fuentes. Si bien hay varias extensiones de navegador que pueden ayudar a detectar fuentes en la web, las dos más populares son WhatFont y Font Finder.

Echemos un vistazo al proceso de identificación de fuentes usando ambas extensiones.

WhatFont

WhatFont es ampliamente popular para detectar rápidamente varias fuentes a la vez. He aquí cómo usar esta herramienta.

  1. Cuando WhatFont esté habilitado en su navegador, coloque el cursor sobre el texto para mostrar su fuente.
     WhatFont Mostrando El Nombre De La Fuente Sobre El Texto
  2. Una vez que haga clic en el texto, aparecerá una ventana emergente con el resto de los detalles de la fuente, como el tamaño, el color y el estilo de la fuente.
     WhatFont Mostrando Los Detalles De la Fuente De un Texto
  3. Además, puede seleccionar varias secciones de texto simultáneamente para comparar diferentes fuentes en la misma página.
     WhatFont Mostrando Múltiples Detalles De Fuente Al Mismo Tiempo

Descargar: WhatFont para Chrome / Firefox / Safari (Gratis)

Font Finder

Font Finder también muestra los detalles de la fuente cuando pasa el cursor sobre cualquier texto de un sitio web. Sin embargo, proporciona muchos detalles técnicos, por lo que puede ser un poco confuso si no está familiarizado con el diseño web.

Complemento de Buscador De Fuentes Que Muestra Detalles Detallados De La Fuente

Dicho esto, Font Finder es más adecuado para desarrolladores web que desean reemplazar las fuentes existentes por otras nuevas en tiempo real. Esto hace que sea fácil probar las fuentes antes de realizar cambios permanentes.

Te mostramos cómo probar una fuente usando Font Finder:

  1. Resalte una parte del texto de la página web.
  2. Haga clic con el botón derecho en él y seleccione Buscador de fuentes en el menú contextual.
    Reemplazar La Fuente Con El Complemento Buscador De Fuentes
  3. Seleccione Reemplazar fuente con e introduzca el nombre de la fuente. Agreguemos Calibri y veamos cómo cambia la fuente en la vista previa.
    Cambiar La Fuente A Calibri Con El Buscador De Fuentes
  4. Si desea restablecer la fuente, actualice la página.
    Fuente cambiada a Calibri

Descarga: FontFinder para Chrome / Edge / Firefox (Gratis)

¿Qué hay de Comprobar la Fuente en una imagen?

Si desea identificar las fuentes en una imagen, es posible que las extensiones del navegador y la herramienta de inspección de su navegador no le ayuden. Sin embargo, puede probar herramientas de inspector de imágenes en línea como WhatFontIs, FontSquirrel, Fontspring, WhatTheFont y muchas otras.

El proceso para identificar una fuente a partir de una imagen es prácticamente el mismo en todas las herramientas. Intentemos identificar la fuente de una imagen usando WhatTheFont.

  1. Si aún no lo ha hecho, descargue la imagen que desea usar.
  2. Importe la imagen en WhatTheFont.
    Caja de Detección de Fuentes de imagen WhatTheFont
  3. WhatTheFont detectará automáticamente el texto de tu imagen. Reduzca o amplíe el cuadro de recorte para que rodee la fuente que desea identificar. Pulsa el botón de flecha cuando hayas terminado.
    Agregar una imagen a WhatTheFont
  4. WhatTheFont coincidirá con la fuente de la imagen con las fuentes de su galería, y le mostrará fuentes estrechamente relacionadas.
     WhatTheFont Mostrando Fuentes Relacionadas
  5. Si no encuentras una buena coincidencia de inmediato, puedes seguir haciendo clic en Mostrar más resultados para ver más fuentes relacionadas.
     Mostrar más resultados en WhatTheFont

Detecta Fuentes de la Web y Úsalas en Tus Diseños

Las fuentes juegan un papel importante en el éxito de un sitio web o un diseño gráfico. Si te encuentras con una fuente atractiva mientras navegas por la web, puedes detectarla fácilmente utilizando los métodos anteriores.

Shan Abdul (107 Artículos Publicados)

Shan Abdul es licenciado en ingeniería. Después de completar su graduación y EM, ha comenzado su carrera como escritor independiente. Escribe sobre el uso de diferentes herramientas y software para ayudar a las personas a ser más productivas como estudiante o profesional. En su tiempo libre, le encanta ver videos de Youtube sobre productividad.

Más de Shan Abdul

Leave a Reply

Deja una respuesta

Tu dirección de correo electrónico no será publicada.