¡Al fin! typeface.js es una librería JavaScript que yo y muchas gente más estaba esperando. Esta librería mediante el uso de <canvas/> nos permite utilizar en nuestra web cualquier tipografía.
Se acabo el ceñirse a las 3 o 4 fuentes clásicas que se encuentran en todos los sitemas operativos para evitar la perdida de compatibilidad. Lo bueno de este sistema es que al estar basado en Javascript es perfectamente compatible con el 99% de los navegadores del mercado.
Además tiene otras ventajas como, por ejemplo: es legible para los buscadores, multiplataforma, fácil de usar mediante CSS, ligero, y además permite seleccionar el texto y copiarlo (Aunque no muestra el texto seleccionado. Es algo extraño).
Pasemos a ver como implementarlo en nuestro sitio y como usarlo.
Implementación
- Descargamos la librería TypeFace.js
- Convertimos la fuente TrueTipe deseada a Javascript. Para ello tenemos disponible este conversor que nos facilita el trabajo.
- Añadimos en el header la llamada a la librería JavaScript y a la fuente convertida en el paso anterior de la siguiente forma:
Código HTML (Copiar):
¡Importante! Hay que llamar a la Hoja de estilo CSS antes de la inclusión de los dos archivos Javascript.
Uso: Html + Css
Una vez que ya hemos incluido todo lo necesario en nuestro sitio web solo nos queda incluir un poco de CSS y Html en el sitio para aplicar la fuente que queramos. Por ejemplo: podemos amplicar nuestra fuente a un div de la siguiente forma:
-
Typeface.js will convert these lines of text to YOURFONT.
-
</div>
Por supuesto que también podemos hacer esto por medio de CSS creando por ejemplo una clase llamada Myfont de la siguiente forma:
-
.Myfont {font-family: YOURFONT}
El resultado es bastante bueno, además nos permite usar nuestra fuente deseada conjuntamente con otras propiedades de CSS como font-weight:bold; o line-height entre otras.
Si queréis ver ejemplos de la librería en funcionamiento dirigíos a la sección ejemplos de la web oficial.