Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

domingo, 26 de octubre de 2008

Typeface.js - como insertar fuentes en páginas web


Intentar agregar fuentes "no seguras" a una página web es una de las actividades más frustantes para todo aquel que se inicie en el diseño web.

Se puede recurrir al reemplazo de texto por imágenes, vía CSS o, de otra manera, implementar sIFR, mediante JavaScript y Flash.

Recientemente, David Chester ha presentado (bajo licencia MIT) a typeface.js un JavaScript que renderiza las fuentes vía canvas (para los navegadores que lo soportan) o mediante VML para Internet Explorer.

La implementación, se lleva a cabo de la siguiente forma:


<html>
<head>

<!-- load any external stylesheets first -->

<link rel="stylesheet" type="text/css" ref="/style.css">


<!-- then load the typeface.js library and typeface.js fonts -->

<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>

<body>

<!-- go ahead and specify typeface.js fonts with CSS -->

<div class="myclass typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>


Actualmente, sólo están disponibles 3 fuentes para este script.
  • Helvetiker
  • Optimer
  • Gentilis
Aunque bien está disponible la conversión, vía web.

Para un ejemplo, se puede consultar un test con la fuente Fraktur (gentileza del sitio http://coruna.elahorcado.net/)


Entradas relacionadas:
@font-face: lo que se viene en Firefox 3.1
Share:

Publicidad

Estadísticas

A cotidiano, me siguen