Hace unos meses atrás había hecho un pequeña guía de como integrar Cufón en WordPress a través de un plugin. Hoy quiero hacerles conocer una alternativa a esta tecnología: TypeSelect.

Con TypeSelect podremos reemplazar las llamadas “Safe Fonts” con cualquier fuente que deseemos. Todo esto se basa en Javascript, jQuery y CSS, y su implementación es muy sencilla.

Si tenes un Blog y estas aburrido de esas “Safe Fonts” podes implementar TypeSelect y dar un cambio a tu diseño.

Antes de explicar como se implementa, veremos los pro y los contra que implementar TypeSelect implica:

Pros

• Texto seleccionable
• Funciona con todos los navegadores modernos, salvo Opera
• Personalización via CSS
• Soporta caracteres UTF-8

Contras

• No funciona en Opera
• Para que funcione el usuario debe tener activado la consola Javascript
• No se brinda soporte para la propiedad hover
• El texto no es seleccionable en IE

Una vez analizados los pro y los contras, sabrás si esta tecnología es la que mejor se adapta a tu proyecto.

Instalación en WordPress.

Si bien su instalación en WordPress no varia con respecto a una instalación típica, intentare explicar paso por paso como lograrlo.

Primeramente necesitamos una copia de TypeSelect. Una vez descargada, moveremos la carpeta typeselect a la carpeta base de nuestro Theme. Por cuestiones de prolijidad y para mantenerme mas organizado he renombrado la carpeta typeselect a JS.

Una vez hecho esto, necesitamos abrir nuestro archivo Header.php y antes de la etiqueta </head> debemos introducir estas lineas:

<link rel="stylesheet" type="text/css" href="j<?php bloginfo('stylesheet_url'); ?>/js/typeselect.css"/>
<script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>js/typeface-custom.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/fonts/nilland_regular.typeface.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/typeselect.js"></script>

La primer linea corresponde a la hoja de estilo de TypeSelect que le dará formato al texto seleccionable e incluye unos pequeños Hacks para IE. Siempre podes incluir este archivo en tu propia hoja de estilo.

La segunda linea corresponde a la fuente que quieras usar, localizada en la carpeta fonts.

En la tercera linea estamos incluyendo a jQuery, si tu Theme ya se encuentra trabajando con jQuery, esta linea no es necesaria, y debes eliminarla.

Y la cuarta linea finalmente corresponde a TypeSelect propiamente dicho.

Consideraciones sobre las fuentes

Como en Cufón, aquí también es necesario convertir nuestras fuentes .ttf a un formato en el cual TypeSelect las pueda leer.

Para eso, necesitamos subir la fuente que deseemos y convertirla a JS con esta herramienta.
Recordá que muchas fuentes no permiten hacer embedding, por lo cual tenes que leer cuidadosamente las licencias. Por suerte Font Squirrel tiene un amplia recopilación de fuentes que si permiten el embedding.

Una vez convertida tu fuentes, debes guardarla en la carpeta Fonts para luego invocarlas.

Finalmente, Implementación.

La implementación de TypeSelect es mucho mas sencilla que en Cufón ya que nos manejamos solo con CSS. Supongamos que tenemos una etiqueta <h1> a la queremos aplicar TypeSelect. Para eso debemos agregar la clase select a la etiqueta que vamos a transformar (en este caso <h1>) e introducir el nombre de la fuente que queremos usar dentro de la propiedad font family.

<h1 class="select">Texto a transformar</h1>

h1 {
color: #c2c2c2;
font-family: 'Linux Libertine', Georgia, serif; 
font-style: italic;
font-size:2.35em;
height:1em;
}

Nota que hemos usado la fuente Linux Libertine en italic. La siguiente declaración en la familia de fuentes, cumple el objetivo de mostrar otra familia para el Navegador Opera, o en el caso de que el usuario no tenga habilitado Javascript.

Como lo habrás notado su implementación es algo de lo mas sencilla y le dará un “lavado de cara” a tu diseño sin grandes complicaciones.