¿Cómo trabajar con tipos de letra generados por Cufon? (Avanzado)

Este tutorial le presenta el modo de insertar caracteres especiales en el texto existente construido con Cufon o cambiar a un tipo de letra diferente generado por Cufon.

Cufon es un generador de tipos de letra en línea, que puede transformar cualquier tipo de letra de su ordenador en Java script. Más tarde, para incorporar un tipo de letra en una página web, sólo tiene que cargarlo con la etiqueta de script. Antes de la transformación del tipo de letra, puede manipular con algunas sus características, tales como conjuntos de caracteres incluidos o glifos, para optimizar una fuente para su aplicación web en particular. Y también es ‘SEO-friendly’.

Si su plantilla contiene Cufon, y va a sustituirlo por otro o agregar algunos caracteres especiales a él:

1. Primero es necesario encontrar qué tipo de letra (fuente) es utilizado en el texto.

Abra la carpeta sources(+symbols)/psd del paquete de la plantilla. Abra el fichero .psd que representa la página con el tipo de letra que desea cambiar en Adobe Photoshop. Elija la herramienta “Type”(Tipo) de la paleta “Tools” (Herramientas) y haga clic en el texto para destacarlo. Escoja un tipo de letra del cuadro desplegable “Set the Font Family” (Configurar familia de fuentes).

(Cuadro desplegable de selección de Familia de fuente en la barra de opciones de Photoshop)

2. En segundo lugar, es necesario verificar si este tipo de letra es compatible con los caracteres especiales del idioma que está utilizando para plantilla, si desea agregar algún símbolo especial.

En PC puede utilizar Font Runner. Es un gestor de fuentes/tipos de letra gratuito para Windows para manejar sus ficheros de tipos de letra manteniéndolos en las carpetas elejidas. También le permite examinar sus fuentes – cada uno en particular por sus supported characters (caracteres que soporta).

Si ha instalado Font Runner, ábralo y encuentre la carpeta de fuentes/tipos de letra en su ordenador (por ejemplo C:\Windows\Fonts) del menú a la izquierda.

En el panel derecho busque su fuente empezando a escribir su nombre. Asegúrese de que está seleccionada y cambie el modo a “Font Map”.

Nota: si no puede ver los caracteres especiales de su idioma en la tabla “Font Map”, ellos no son compatibles con este tipo de letra, y tiene que elegir un tipo diferente que es compatible. Para encontrarlo, puede utilizar el servicio en línea WhatThe Font.

3. Ahora tiene que generar un fichero .js de su tipo de letra subiendo el fichero del tipo de letra a http://cufon.shoqolate.com/generate/. Para hacer esto:

• copie el fichero de tipo de letra que desea utilizar de su carpeta “Fonts” y péguelo en su Desktop o cualquier otro directorio que le permite encontrar la fuente con facilidad. Esto puede ser el tipo de letra utilizado en la plantilla, si está seguro de que será compatible con los caracteres especiales del idioma o un tipo totalmente diferente que es compatible con caracteres;
• en http://cufon.shoqolate.com/generate/ elija el tipo de letra que quiere utilizar (en la actualidad sólo los formatos .ttf(TrueType); otf(OpenType); PFB (Printer Font Binary)) guardado en su Desktop utilizando el campo Regular Typeface (Tipo de letra regular) o negrita, cursiva y bold negrita cursiva o variaciones. Asegúrese de hacer clic en el cuadro de EULA para confirmar que permiten la incorporación web.
  
• El conjunto de opciones Include the following glyphs (if available) (Incluir los siguientes glifos (si están disponibles)) nos permite elegir el grupo adecuado de símbolos para agregar al fichero del tipo de letra. Hay que recordar que cada grupo adicional de símbolos aumenta el tamaño del fichero del tipo de letra. Por lo tanto, Usted tiene que tratar de restringir el número de símbolos en el fichero de la fuente para que el proceso de carga del sitio no se retrase. Normalmente es suficiente activar la opción Basic Latin.

*Para verificar si Usted necesita activar Latin-1 Supplement, Latin Extended-A, etc, tiene que visitar http://jrgraphix.net/r/Unicode. En esta página web puede encontrar los símbolos relacionados con cada una de esas categorías.

En…and also these single characters (y también estos caracteres) escriba sus caracteres de idioma en mayúscula y minúscula en una fila como: aistaAISTA.

• Usted puede pasar otros ajustes. Los ajustes por defecto son recomendados.
• Terms (Términos): debe aceptar los términos marcando la casilla correspondiente. A continuación, haga clic en el botón “Lets do this!”(Vamos a hacer esto).

4. Guarde el fichero generado .js en la carpeta “js” de su sitio (si está trabajando en nivel local) o en su Desktop para subirlo a su servidor más tarde.

5. Si Usted ha incorporado algunos caracteres especiales en el tipo de letra existente utilizando el generador de Cufon, todo lo que necesita hacer es reemplazar el fichero existente .jscufon colocado en la carpeta "js" con el nuevo generado. En este caso, ambos ficheros deben tener el mismo nombre, así se le pide confirmar la sustitución del fichero al mover el fichero a la carpeta "js". Confirme el reemplazo, y eso es todo.

Si ha generado un diferente tipo de letra de cufon y desea reemplazar el existente tipo con este, por favor, siga estos pasos.

6. Copie el nombre de su fichero .js generado (apriete F2, luego Ctrl + C).

7. Abra el fichero index.php o index.html (se depende del tipo de plantilla) en un editor de texto o en Dreamweaver y busque el nombre del tipo de letra que desea reemplazar (consulte Paso1 de este tutorial, si necesita el nombre) con ayuda de teclas Ctrl (Command) + F. Debe verse como:

<script src=”js/font_name.font.js” type=text/javascript></script>

y reemplace font_name con el nombre de su fichero .js generado (Paso 6). Guarde los cambios.

8. Abra su fichero .js generado y copie el nombre de familia de fuente:

  font-family:font  family name

9. Abra cufon-replace.js en la carpeta “js” de su plantilla y reemplace el nombre de familia de fuente del tipo de letra existente con el nombre de familia de fuente del tipo de letra generado y guarde los cambios.

10. Abra su página web en un navegador web para verificar si el tipo de letra ha sido reemplazado. Apriete F5 para borrar la caché, si es necesario.

Para obtener más información, por favor consulte el tutorial:

¿Cómo trabajar con tipos de letra generados por Cufon?