Como diseñador gráfico, ¿alguna vez te has encontrado con una hermosa fuente utilizada en un sitio web que te gustaría usar también en tu proyecto?
Bueno, es difícil determinar el nombre de la fuente con sólo verla.
Por suerte, existen toneladas de herramientas que podrían ayudarnos a identificar el nombre de la fuente.
¡Aquí están las cinco mejores opciones que puedes probar!
#1 Identificar la fuente en el sitio web usando la extensión FontFace Ninja
FontFace Ninja es mi herramienta favorita para encontrar el nombre de una fuente junto con los estilos utilizados en un sitio web. Incluso proporciona un enlace directo para comprar o descargar la fuente si está disponible de forma gratuita.
Esta extensión del navegador también proporciona un cuadro de demostración, por lo que podemos escribir cualquier palabra para ver cómo se ve. También puedes personalizar el color, el tamaño, el ancho y muchos más antes de decidirte a elegir la fuente.
Cómo utilizar FontFace Ninja:
- Descargue e instale FontFace Ninja para Cromo, Firefoxo Safari
- Abrir cualquier sitio web
- Haga clic en el icono de FontFace Ninja en la barra del navegador.
- Pase el puntero del mouse sobre el texto.
- Finalmente, obtuviste el nombre de la fuente y el enlace para descargar o comprar.
#2 Encuentra el nombre de una fuente para un sitio web usando WhatFont
Como sugiere el nombre, esta extensión del navegador está dedicada a identificar las fuentes utilizadas en un sitio web. FontFace es muy parecido a FontFace Ninja: puede determinar el nombre de la fuente, la familia de fuentes, el tamaño, el estilo, la altura, el ancho, el peso y el color, pero viene con una interfaz más minimalista. También proporciona un enlace directo para obtener la fuente gratuita una vez que se detecta, pero para la fuente premium, no proporciona ningún enlace.
Cómo utilizar WhatFont:
- Descargue e instale WhatFont para Cromo o Safari
- Vaya al sitio web donde desea conocer la fuente.
- Haga clic en el icono de WhatFont que apareció en la barra del navegador.
- Pase el mouse sobre la página web y haga clic en ella para obtener información adicional.
- Si la fuente está disponible de forma gratuita, la extensión proporcionará el enlace de descarga.
#3 Identificar fuente sin extensión con Fount
Fount es una herramienta web creada por Nathan Ford para ayudar a los usuarios a descubrir rápidamente el nombre de la fuente de un sitio web. La herramienta solo proporciona información básica como el nombre de la fuente, el estilo, el tamaño y el peso. No habrá un enlace de descarga directa para la fuente, por lo que se le dará un nombre como pista para que pueda encontrar el enlace de descarga usted mismo.
Cómo utilizar la fuente:
- Vaya a la página del sitio web donde desea saber el nombre de la fuente.
- Abre una nueva pestaña, visita https://fount.artequalswork.com/
- En la página Fuente, haga clic y arrastre el botón “Fuente” a la pestaña del sitio web.
- El nombre de la fuente se mostrará en la esquina superior derecha de la página web.
Actualizar: Fount ya no funciona en los navegadores modernos.
#4 Identifique la fuente a partir de la captura de pantalla de la página web usando WhatTheFont
WhatTheFont es una herramienta en línea para reconocer una fuente a partir de una imagen, incluida una captura de pantalla de una página web. Todo lo que necesita es capturar la pantalla, cargar la página de captura de pantalla en el sitio web WhatTheFont y dejar que examine la fuente a través de su imagen.
Una vez terminado, obtendrá un nombre de fuente junto con el enlace de descarga o compra. Desafortunadamente, este servicio no es tan preciso en comparación con las extensiones de navegador como las que mencioné en los puntos 1 y 2.
Cómo utilizar WhatTheFont:
- Capture la página del sitio web usando su captura de pantalla favorita
- Sube la captura de pantalla al WhatTheFont página
- Espere hasta que finalice el proceso de reconocimiento.
- Toma la fuente (si está disponible)
#5 Obtenga el nombre de la fuente del CSS del sitio web
La razón por la que pongo este método al final de la lista es la dificultad de hojear el código HTML y CSS. Las páginas web modernas contienen un script CSS que actúa como el “estilo” de la web. También incluye la configuración de fuentes representadas por líneas de escritura. Es fácil de leer para un desarrollador web, pero muy confuso para las personas que no tienen idea de programación web.
Cómo obtener el nombre de la fuente de CSS:
- Ir al sitio web deseado
- Haga clic derecho en el espacio en blanco
- Seleccionar Inspeccionar elemento o simplemente presionando CTRL+MAYÚS+I
- Verá un nuevo cuadro que contiene un script.
- Prensa CTRL+F y escribe “familia de fuentes”
- El formato suele ser así “bla…bla…familia de fuentes: ‘nombre de fuente’…bla…bla”
Nota: No existe una forma segura de averiguar el nombre de la fuente en CSS. Por lo tanto, es posible que este método no funcione para todos los sitios web.
#6 Identifique el nombre de la fuente en el sitio web usando WhatRuns
Encontré otro complemento de navegador útil llamado WhatRuns. Se define como una herramienta para ayudar a los desarrolladores a comprender el material/servicios utilizados en el sitio web, incluido el nombre de la fuente. Si está interesado, WhatRuns está disponible de forma gratuita en Google Chrome y Mozilla Firefox.
Cómo identificar el nombre de una fuente usando WhatRuns:
- Instale WhatRuns en Cromo o Firefox.
- Vaya a cualquier sitio web que desee para descubrir el nombre de la fuente.
- Haga clic en el icono de WhatRuns y espere el proceso de recuperación.
- Ahora verá el nombre de la fuente que ha sido identificada por la herramienta.
Entonces, esa es la mejor manera de averiguar el nombre de la fuente de un sitio web. En mi opinión, la extensión del navegador aún administra la forma más conveniente de identificar nombres de fuentes de manera rápida.
¿Qué opinas? ¿Cuál es tu herramienta favorita para averiguar el nombre de la fuente?
Si ha recopilado todas las fuentes y desea instalarlas en su computadora, consulte la truco para instalar múltiples archivos de fuentes en un instante.
