Cómo ver qué fuente está usando un sitio web

Si alguna vez le ha cautivado por completo una fuente que vio en un sitio web, es posible que se haya preguntado cómo descubrir cómo se llama para poder usarla en su propio contenido. La tipografía de calidad puede mejorar la experiencia de lectura de sus visitantes, por lo que puede valer la pena hacer un esfuerzo para encontrarla. Independientemente de su motivo para verificar qué fuente se utiliza en un sitio web, existen muchas herramientas que pueden ayudar.

En este artículo, analizaremos por qué es posible que desee ver qué fuente utiliza un sitio web. También le mostraremos cómo hacerlo.

¡Empecemos!

Suscríbete a nuestro canal de Youtube

Por qué es posible que desee comprobar qué fuente utiliza un sitio web

Como ya mencionamos, las fuentes hermosas y legibles pueden mejorar la experiencia del usuario (UX) y la legibilidad de su sitio. También garantiza que los visitantes puedan interactuar cómodamente con su contenido sin tener que esforzarse por descifrarlo. Si su texto es elegante pero ilegible, a los lectores les resultará difícil entender o apreciar su material.

Los botones de llamada a la acción (CTA) también pueden resultar prácticamente inútiles si su texto no es legible. Es por eso que puede resultarle útil tener una lista de fuentes que llamen su atención por ser elegantes y legibles. Luego, puede usarlos en su sitio o para un cliente en el futuro.

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

Hay varios métodos que puede utilizar para comprobar qué fuente utiliza un sitio web. La función de inspección de su navegador es una excelente solución, pero hay extensiones que pueden producir efectos equivalentes. Incluso puede encontrar fuentes a partir de imágenes utilizando herramientas en línea. Echemos un vistazo a cada una de estas opciones.

1. Identifique las fuentes con la herramienta Inspector del navegador

Una de las formas más fáciles de verificar qué fuente está usando un sitio web es con la herramienta de inspección de su navegador. Aunque trabajaremos con el Inspector de Chrome en este ejemplo, vale la pena señalar que otros navegadores tienen características equivalentes.

Primero, haga clic derecho en la página web que contiene la fuente que desea buscar. En el menú resultante, seleccione Inspeccionar:

Si prefiere usar un atajo de teclado, pruebe Ctrl + Shift + I para Windows o Linux. Si está usando una Mac, el equivalente es Cmd + Shift + I.

En la ventana del lado derecho de la pantalla, busque el texto con la fuente que desea consultar. Se resaltará cuando seleccione el elemento HTML correspondiente:

A continuación, haga clic en la pestaña Computado y busque "familia de fuentes":

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

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

2. Encuentre fuentes a través de una extensión del navegador

Las extensiones del navegador pueden proporcionar una forma más sencilla de encontrar detalles de fuentes en un sitio web, especialmente si no se siente cómodo con el Inspector. Además, por lo general, pueden brindar la respuesta que está buscando más rápido para que pueda volver a la tarea en cuestión.

Algunos de estos complementos incluyen:

• Fontanello: de uso gratuito, esta extensión le permite encontrar el nombre, el peso, el estilo y más de una fuente simplemente resaltándola y haciendo clic derecho sobre ella mientras navega.
• WhatFont: simplificando aún más la detección de fuentes, WhatFont le permite ver el nombre de un tipo de letra con solo pasar el mouse sobre él.
• CSS Peeper: creada pensando en los diseñadores web, esta extensión es un poco más sólida y puede brindarle detalles adicionales del código CSS de la página web.

Sin embargo, cada una de estas extensiones tiene soporte de navegador variado. 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 podrá utilizar con ninguna otra plataforma.

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

Una vez que instale WhatFont, puede verificar qué fuente está usando un sitio web activándola en la barra de herramientas de su navegador y colocando el cursor sobre un texto:

Cuando coloque el cursor sobre el texto por primera vez, verá solo el nombre de la fuente. Sin embargo, al hacer clic en el nombre se mostrará una ventana emergente ampliada con más detalles como el tamaño, el peso, el color y la altura de la línea. También puede identificar si un 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 el botón Salir de WhatFont en la esquina superior derecha de la ventana de su navegador.

3. Detectar fuentes en imágenes

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

Para usar WhatTheFont, deberá cargar la imagen en cuestión y seleccionar la sección con la fuente relevante:

Luego devolverá una página de resultados con varias fuentes que son similares, si no coincidencias 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 del tipo de letra es muy importante para usted, puede ser difícil encontrar una herramienta que le proporcione lo que desea.

Sin embargo, si está dispuesto a utilizar una fuente similar a la que ha encontrado en una imagen, un detector en línea debería adaptarse perfectamente a sus necesidades.

Conclusión

Las fuentes visualmente atractivas y legibles pueden mejorar la experiencia de lectura de los visitantes de su sitio web. Esto podría llevarlo a estar atento a nuevos tipos de letra que pueda usar en su sitio o para sus clientes. Independientemente del motivo por el que desee comprobar qué tipo de letra utiliza un sitio web, existen muchas herramientas que pueden ayudarle.

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

1. Identifique las fuentes con la herramienta de inspección de su navegador.
2. Busque fuentes utilizando una extensión de navegador como WhatFont.
3. Detecta fuentes en imágenes usando WhatTheFont.

¿Tiene alguna pregunta sobre cómo comprobar qué tipo de letra se utiliza en un sitio web? ¡Háganos saber en la sección de comentarios!

Imagen de rudall30 / shutterstock.com