Skip to main content

Utiliza cualquier tipografía en web con Javascript

Typeface.js es la librería javascript esperada por muchos diseñadores, typeface mediante el uso de <canvas/> se encarga de que puedas utilizar en tu sitio web cualquier tipografía que desees.

Es decir normalmente en un diseño web únicamente puedes utilizar tipografías como Verdana, Arial, Georgia u cualquier otra con el único requisito que esa fuente exista en el equipo de tu visitante, cosa que generalmente no sucede.

Typeface soluciona este detalle dando la posibilidad de usar cualquier tipografía sin necesidad de preocuparte, como se hace y cuales son su ventajas en comparación a otras alternativas como sIFR3 y FLIR?

Ventajas

  • Legibles para buscadores
  • No es necesario Flash ni PHP, solo javascript el 99% de los navegadores lo tiene.
  • Multiplataforma
  • Fácil de utilizar
  • Ligero
  • Permite seleccionar y copiar el texto

Como utilizarlo?

1.-Descargar la libreria TypeFace.js

2.-Renombrar la fuente que deseas utilizar por ejemplo de: helvetica.ttf > helvetica.typeface.js

3.-Utilizar el siguiente codigo en la cabezera <head>

<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
<div class="myclass typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Eso es todo en caso de que el script no pueda cargar la fuente personalizada esta mostrara automáticamente la dispuesta como fuente por default para el sitio web.

Si quieres puedes ver algunos ejemplos del uso de este excelente script:

Vía: Render text with javascript typeface

Corre la voz con tus amigos/contactos:

4 Replies to “Utiliza cualquier tipografía en web con Javascript”

  1. Gracias Obelix,

    El link que dejas para convertir la fuente no funciona. 🙁

    Dónde puedo convertirla?

    Saludos y gracias

  2. Gracias por la aclaración @Obelix sinceramente no la habia probado a fondo de hecho yo descargue la fuente del ejemplo del sitio.

    Saludos :mrgreen:

  3. Muchas gracias por semejante hallazgo !!

    Pero me temo que te has dejado un importante punto sin comentar:
    Es necesario embeber la fuente en formato typeface; es decir ese paso que comentas de renombrar fuente.ttf a fuente.typeface.js es incorrecto.
    Debes pasar por http://typeface.neocracy.org/fonts y convertirla.

    Respecto a ‘Incredulo’, sí funciona. Puedes coger cualquier fuente y convertirla; pero debe ser libre. Sino el convertidor te dirá que no es posible hacerlo.

    Resulta algo complejo de usar, pero los puntos básicos son:
    Da igual como llames a la fuente.typeface.js, lo importante es que al decir font-family; pongas el nombre de la fuente QUE NO DEL ARCHIVO!.
    si la fuente se llama “Pepito Palotes” debes poner eso. (Sino estas seguro de como se llama la fuente abre el .js con dreamweaver y al final aparece fontFamilyname.

    Saludos y gracias otra vez!.

  4. Hola Jorge, oye, soy un novato en esto de la programación en web pero el título de tu artículo me interesó mucho y no sé si es como lo entendí. ¿Eso de “Utiliza cualquier tipografía en web con Javascript ” es realamente así? ¿Puedo bajar cualquier tipo, por ejemplo, una de Star Wars y diseñar mi página y con este javascript, cualquier navegador web que lo soporte, podrá ver el texto de mi página con esa tipografía de Star Wars?

    Porque en los ejemplos de la página de TypeFace sólo veo que cambian el color, el espaciado, el tamaño, etc, pero no veo que pongan una tipografía que no esté en mi máquina.

    ¿A ti te ha funcionado? ¿Puedes poner un ejemplo?
    🙄 😛

Compartir