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

Si alguna vez te ha fascinado por completo una fuente que has visto en un sitio web, es posible que te hayas preguntado cómo descubrir cómo se llama para poder usarla en tu propio contenido. La tipografía de alta calidad puede mejorar la experiencia de lectura de sus visitantes, así que trate de encontrar una. No importa cuál sea la razón por la que está comprobando qué fuente se está utilizando en un sitio web, hay muchas herramientas que pueden ayudar.

En este artículo, discutiremos por qué debe verificar qué fuente está utilizando un sitio web. También le mostraremos cómo hacerlo.

¡Empecemos!

Suscríbete a nuestro canal de YouTube

¿Por qué vale la pena verificar qué fuente usa el sitio web?

Como mencionamos, las fuentes hermosas y legibles pueden mejorar la experiencia del usuario (UX) y la legibilidad de su sitio web. También garantiza que los visitantes puedan acceder cómodamente a su contenido sin intentar decodificarlo. Si su texto es elegante pero ilegible, los lectores tendrán dificultades para comprender o apreciar su material.

Los botones de llamada a la acción (CTA) también pueden resultar casi inútiles si su texto no es legible. Por lo tanto, tiene sentido tener una lista de fuentes que llamen la atención, ya que son elegantes y legibles. Luego puede usarlos en su sitio web o para el cliente en el futuro.

Cómo verificar qué fuente está usando un sitio web (3 métodos disponibles)

Hay muchos métodos que puede usar para averiguar qué fuente está usando un sitio web. La auditoría del navegador es una gran solución, pero existen extensiones que pueden producir efectos equivalentes. Incluso puede encontrar fuentes de imágenes usando herramientas en línea. Echemos un vistazo a cada una de estas opciones.

1. Identifique las fuentes usando el Inspector del navegador

Una de las formas más fáciles de averiguar qué fuente está usando un sitio web es usar la herramienta de inspección del navegador. Si bien trabajaremos con Chrome Inspector en este ejemplo, vale la pena señalar que otros navegadores tienen una funcionalidad equivalente.

Primero, haga clic derecho en la página que contiene la fuente que desea encontrar. Seleccione del menú que aparece Controlar:

Si prefieres usar un atajo de teclado, pruébalo Ctrl + Mayús + I para Windows o Linux. Si está utilizando una Mac, la contraparte es Cmd + Mayús + I.

En la ventana del lado derecho de la pantalla, busque texto usando la fuente que desea verificar. Se resaltará cuando se seleccione el elemento HTML apropiado:

Luego haga clic Calculado y busque «familia de fuentes»:

Debería ver el nombre de la fuente y su estilo aquí.

Para ver el CSS relacionado con la fuente, consulte a continuación Estilos Correa. Puede desplazarse para buscar valores relacionados con la fuente. Sin embargo, dado que puede haber anulaciones y reglas de estilo irrelevantes aquí, Calculado La pestaña suele ser más útil.

2. Encuentra fuentes usando una extensión de navegador

Las extensiones del navegador pueden proporcionar una manera más fácil de encontrar detalles de fuentes en su sitio, especialmente si no se siente cómodo con el Inspector. Además, generalmente le darán la respuesta que busca más rápido, para que pueda volver a la tarea en cuestión.

Algunas de estas adiciones incluyen:

Fontanello: De uso gratuito, esta extensión le permite encontrar el nombre de la fuente, el peso, el estilo y más al resaltarlo y hacer clic con el botón derecho mientras navega.
¿Qué fuente?: Mejorando aún más la detección de fuentes, WhatFont le permite mostrar el nombre de un tipo de letra cuando pasa el cursor sobre él.
Vista previa de CSS: Creada pensando en los diseñadores web, esta extensión es un poco más confiable y puede brindarle algunos detalles adicionales del código CSS de su sitio web.

Sin embargo, cada una de estas extensiones tiene un soporte de navegador diferente. WhatFont está disponible para Firefox, Chrome, Safari e Internet Explorer. Fontanello, por otro lado, solo está disponible para Firefox y Chrome. CSS Peeper es una herramienta específica de Chrome que no puede usar en ninguna otra plataforma.

Para encontrar rápidamente el nombre de una fuente específica, la opción más fácil es WhatFont. Dado que también es compatible con la mayoría de los navegadores, lo usaremos para una demostración rápida.

Después de instalar WhatFont, puede verificar qué fuente está usando el sitio activándola en la barra de herramientas de su navegador y pasando el cursor sobre algún texto:

La primera vez que pasas el cursor sobre el texto, solo verás el nombre de la fuente. Sin embargo, al hacer clic en el nombre se mostrará una ventana emergente ampliada con detalles adicionales como el tamaño, el peso, el color y la altura de la línea. También puede determinar si el tipo de letra está disponible a través de Typekit o Google Fonts.

Una vez que haya terminado de verificar los detalles de la fuente, puede salir de la herramienta usando Salir de WhatFont en la esquina superior derecha de la ventana del navegador.

3. Detecta fuentes en imágenes

Finalmente, también puede intentar ver las fuentes utilizadas en las imágenes. Esto incluye tipos de letra que hayas visto en logotipos o infografías. Según nuestra experiencia con los detectores de fuentes, que fuente es la herramienta en línea más eficaz para este trabajo.

Para usar WhatTheFont, debe cargar la imagen en cuestión y seleccionar la sección con la fuente adecuada:

Luego devolverá una página de resultados con varias fuentes que son similares, si no exactas, a la que está tratando de identificar:

Su tasa de éxito aquí puede variar según la fuente y la popularidad de la fuente. Si el nombre exacto de un tipo de letra es muy importante para usted, puede ser difícil encontrar una herramienta que le brinde lo que desea.

Sin embargo, si está abierto a usar una fuente similar a la que encontró en la imagen, un detector en línea debería satisfacer sus necesidades.

Solicitud

Las fuentes visualmente atractivas y legibles pueden mejorar la experiencia de lectura de los visitantes de su sitio web. Esto puede indicarle que busque nuevos tipos de letra que pueda usar en su sitio o para sus clientes. No importa cuál sea el motivo para verificar qué fuente está usando un sitio web, hay muchas herramientas que pueden ayudarlo.

En esta publicación, hemos discutido tres métodos para averiguar qué fuente está usando un sitio web: