Como generar acentos y otros caracteres con Cufon

La mayoría de las plantillas (temas) WordPress actuales vienen con Cufón integrado. Cufón permite cambiar el estilo de las fuentes, pudiendo dar un nuevo estilo a nuestra plantilla con cualquier tipo de fuente por muy rara que parezca.

Aunque no siempre todo es relativamente así de simple y muchos suelen tener problemas a la hora de poder visualizar algunos caracteres, entre ellos nos podemos encontrar con la letra “ñ” o aquellos caracteres que han de ir acentuados.

Para solventar dicho problema debemos seguir una serie de pasos que podrás ver a continuación, pero para ello previamente debemos disponer del fichero de la fuente que vayamos a necesitar en su formato correspondiente, que puede ser: otf, pbf o bien el más empleado y conocido ttf.

  1. Subimos el tipo de fuente al generador Cufón.
  2. Indicar el nombre de la fuente y aceptamos la licencia.
  3. Donde dice “Include the following glyphs” seleccionamos las opciones “Basic Latin” y “WordPress punctuation”, esta última no es necesaria para los acentos pero es útil si lo usamos con Wp. Al final de las opciones dice “..and also these single characters”, este es el lugar donde debemos incluir los caracteres que deseamos que aparezcan y puedan ser visibles: áÁéÉíÍóÓúÚñÑ
    En este paso podemos incluir todos aquellos caracteres que queramos, por ejemplo, “¿”, “×”, “÷”, “%” “$”, etc…
  4. En “Permormance & file size” se recomienda dejarlo tal y como está, a menos que sea necesario cambiarlo.
  5. Finalmente debemos aceptar los términos y pulsar el botón “Let´s do this!”. Cufon creará un fichero .js que podemos descargar y alojar donde se encuentran las fuentes de nuestra plantilla.
    No podemos olvidar mencionar un plugin para WordPress que permita llevar a cabo la utilización de estas fuentes, así que si lo necesitan, dejo aquí algunas explicaciones:

Cufón para WordPress es una maravilla de plugin y además es fácil de instalar y de asociar rápidamente con las distintas etiquetas de nuestro estilo. Simplemente debemos descargarlo e instalarlo como es habitual.

Las fuentes que vayamos a emplear deben ser convertidas, como dije anteriormente a formato .js y subirlas a la carpeta fonts de dicho plugin.

Código en nuestro estilo…

Editamos nuestro fichero style.css y llevamos a cabo los siguientes cambios para re-emplazar las etiquetas deseadas.

Cufon.replace('h1', { fontFamily: 'Fuente' });

“Fuente” es el nombre de del fichero .js sin olvidarnos de la extensión.

Siempre podemos aplicar más efectos, para ello empleamos CSS2 y le damos un toque de degradado.

Cufon.replace('h1', {
color: '-linear-gradient(red, #fff, #23d559, rgb(0, 0, 0))'
});

Si quieres saber más sobre los estilos que puedes aplicar, debes echar un vistazo a esta Wiki.


Comentarios para Como generar acentos y otros caracteres con Cufon

  • hola.. yo tengo el problema de las ñ y los acentos, en una plantilla que venia con cufon integrado. Realice los pasos de bajar la fuente en formato TTF y la converti a js con la pagina de cufon, luego lo remplace por el archivo de fuentes de la plantilla pero todo sigue igual.. La unica solucion que encontre fue renombrar los archivos, tanto de la fuente como de cufon y asi quedo cufon desabilitado. Pero no es lo optimo. Que podra suceder?

    Saludos

    Mauricio Parra Casado 7 febrero 2011 4:18 am Responder
    • Hola Mauricio, sigue los pasos indicados en esta entrada y no debes tener problema, el único inconveniente que puedes tener es que el nombre del archivo .js generado no te coincida con el que tienes en el código de tu plantilla, para lo cual deberás mirar el código y asegurarte que el fichero que generes con Cufón es el mismo que el que dispones en tu plantilla. Es indiferente el tipo de formato que emplees, pero el nombre o lo cambias en el archivo o lo buscas en el código y le dices el nuevo que vas a usar.

      Un saludo

      Vera 7 febrero 2011 7:19 am Responder
  • Hola! Estoy tratando de crear una fuente para cufón desde el generador de su página. Ya la cargué y todo, pero tengo problemas para visualizar los caracteres con acento y el singo ¿ y la ñ.
    Al crearla hice lo de añadir en el campo de texto “.. and also these single characters” los siguientes caracteres: ÁáÉéÍíÓóÚúÑñ.
    Además, en photoshop uso esa fuente y si contiene esos caracteres. Aún así no los logro hacer aparecer! Me podrías ayudar? Saludos!

    Rodrigo Contreras 16 marzo 2011 2:57 am Responder
    • Hola Rodrigo, si has seguido los pasos indicados en la entrada, lo único que se me ocurre es que hayas subido a tu servidor el fichero .js con distinto nombre al que tienes en la plantilla de WordPress. Deberías probar eso y luego me cuentas. No olvides decirnos tu blog, así le echamos un vistazo y tienes aquí entre los comentarios un enlace hacia el mismo.

      Un saludo

      Vera 16 marzo 2011 9:39 pm Responder
  • gracias

    William Joel Ibarra Bogarin 30 mayo 2011 3:48 am Responder
  • Gracias he solucionado mi dolor de cabeza gracias a tu post :))

    Goula 19 febrero 2012 11:05 pm Responder
    •  Me alegro que hayas podido solucionar el problema. Un saludo

      Vera 20 febrero 2012 3:03 pm Responder
  • Hola vera, tgo un problemilla, he seguido los pasos, tenia la fuente PT Sans y en la carpeta fonts tenia la version regular, bold e italica. He seguido los paso y me ha arrojado un .js con nombre largo, luego instale el plugin y segui los pasos. Ahora muestra las ñes pero me quedaron los titulos en italica, no en regular. Habré hecho algo mal? (www.diostesalve.c)

    Francisco Urrea Lioi 1 marzo 2012 6:35 pm Responder
    • el fichero .js que te ha dado es el mismo que has de subir al servidor de tu web en la misma ruta que tienes el otro fichero fuente.

      Vera 1 marzo 2012 8:45 pm Responder
  • Pues mira lo he solucionado asi: http://forobeta.com/wordpress/24242-letra-n-titulo-de-post.html
    Te dejo el link por si quieres publicarlo para las generaciones futuras. Saludos.

    Francisco Urrea Lioi 1 marzo 2012 7:31 pm Responder
    • El enlace ha sido publicado. De todas te agradezco tu colaboración dejando tu comentario con otro tipo de solución ;).

      Saludos

      Vera 1 marzo 2012 8:48 pm Responder

Dejar un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *