Detectar la fuente de texto utilizada en una web

Detectar la fuente de texto utilizadaAtrás quedó la época en la que si el diseñador de un sitio web quería utilizar una fuente de texto especial, debía convertir el texto en imagen para incluirlo en su web, o bien, realizar el diseño del sitio utilizando otras tecnologías, como por ejemplo Flash. Hoy en día, existen muchos recursos online, como el que ofrece Google Fonts, en los cuales es muy sencillo incorporar fuentes de texto especiales para añadir mas vistosidad a nuestro sitio. Gracias a esta gran diversidad de fuentes, puede darse el caso de que navegando por la web, encontremos un sitio que incorpore una fuente de texto y que por la razón que sea, queramos incorporarla a nuestra página. Nuestra tarea será la de detectar la fuente de texto utilizada.

Detectar mediante el navegador

Los principales navegadores actuales, incorporan herramientas que nos permiten visualizar el código fuente de un sitio web. En dicho código podemos visualizar la estructura HTML y los estilos CSS que se aplican a cada etiqueta.

Pulsando con el botón derecho del ratón, tanto en Firefox como en Chrome, nos aparece la utilidad Inspeccionar elemento, con lo que podremos obtener información de la fuente de texto utilizada.

Detectar la fuente de texto utilizada

En este ejemplo, vemos como la página web de descarga del navegador Firefox, el titulo, está utilizando una fuente de texto llamada Open Sans Light (etiqueta font-family).

Detectar mediante una aplicación online

Si ves muy complicado navegar por el código interno de una página web, existe una solución mucho mas sencilla. Se trata de la herramienta Fount, de Art Equals Work.

Para utilizar esta herramienta, deberemos guardar la página en nuestros favoritos (marcadores), y a continuación navegar hasta el sitio web en el que queramos detectar la fuente. Pulsaremos sobre el icono recién creado en nuestros marcadores, y finalmente, pulsaremos sobre la fuente de texto que queramos detectar.

Obtendremos un recuadro con la información de la fuente, su tamaño y los estilos aplicados:

Detectar la fuente de texto utilizada

 Ya sé el nombre de la fuente de texto, ¿Ahora que?

Si es una fuente común (Arial, Verdana, Times, etc.), podremos insertarla sin problemas en nuestra web, pero si es una fuente especial que está en el servidor o en algún servicio de fuentes online (como el que hemos comentado de Google Fons), deberemos localizar la llamada a dicha fuente de texto.

Si eres de los que te gusta investigar el código fuente, deberás localizar alguna llamada del tipo:

@font-face {
font-family: nombre de la fuente;
src: ruta en el servidor;
}

para saber si la fuente se carga la fuente localmente, o bien:

<link href='http://fonts.googleapis.com/css?family=....

para conocer si la fuente es cargada por un servidor externo, en este caso Google Fonts.

En el caso de que no te sepas defender con el código fuente de un sitio web, puedes utilizar a Google para investigar como utilizar ‘x’ fuente en tu página web, aunque irremediablemente, deberás editar el código fuente de tu sitio web para poder incorporarla.

 

Facebooktwittergoogle_plus