The other day working with a web in WordPress and researching why not the accents were shown, I discovered that I was using Cufón.

Cufón is a library that allows us to use almost any typeface in our webs, Ensuring that users who visit the content correctly displayed with the font with which design. Thus, we not depend neither browser or Operating System we are consulting the web.

Knowing and operation, in case you want to integrate this technology into our website, we will need to unburden the library in question, select the font that we will use on our website and convert it into JavaScript code so that visitors always displayed the web with the correct font.

Step 1: Download the library

There are two sites where you can download the cufon-yui.js file:

Step 2: Select the source that we use on our web

Cufón accepts .otf and .ttf fonts. Here are some sites where you can download free sources:

Step 3: Convert the sources to JavaScript

Once the source selected need to make it a JavaScript file and host it on our website. To perform this conversion, it is very simple, just go to the following URL and complete the form, providing the source .otf or .ttf and select the encoding that we will use on our website:

In the images the most important aspects to consider is. In the first section we have to climb or corresponding to our typography (.otf or .ttf) files. If we have only one, we use the first field "Regular Typeface".

Very important, we mark the checkbox!

cufon1 Usar Cufón en nuestra web

In the second section maquemos "Basic Latin"And if we use WordPress we can make "Punctuation WordPress". It is also good idea to add accented characters and NSE, for those fonts that we incorporate them:


cufon21 Usar Cufón en nuestra web

I found a case that did not work this and finally had to look for a similar type of letter and change it on the web, changing the input script that loads the JavaScript source indicating the new file.

Para terminar, aceptamos las condiciones de uso y pulsamos sobre Let's do this!. In a few seconds will begin downloading our source JavaScript turned.

Step 4: Insert the code for web use our Cufón with our new typeface

Within the <head> insert loading library Cufón, jQuery, and the link our converted source as follows:

<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/cufon-yui.js"></script>
<script type="text/javascript" src="/scripts/Bebas_Neue_400.font.js"></script>

Before closing the <body>, we tell Cufón HTML tags what we want the new typeface is applied.

<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'h3' );

If we have multiple sources on our website, we will have to specify for each HTML tag source to use as follows:

<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'h3', { fontFamily: 'Bebas Neue' });
Cufon.replace ('p', { fontFamily: 'Nunito' });

More information about using Cufón

optional plug-ins

If you are using any CMS plugins interesting are the following:

Cufón for WordPress

Cufón for Drupal

Cufón for Joomla

Cufón for vBulletin


Dime qué te ha parecido el artículo...

rating off Usar Cufón en nuestra webrating off Usar Cufón en nuestra webrating off Usar Cufón en nuestra webrating off Usar Cufón en nuestra webrating off Usar Cufón en nuestra web (Ninguna valoración todavía)
loading Usar Cufón en nuestra webCargando…

Use of cookies

This site uses cookies for you to have the best user experience. If you continue to browse you are giving your consent to the acceptance of the above cookies and acceptance of our cookies policy, Click the link for more information.

Notice of cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

Thank you for subscribing!

Pin it on Pinterest

Share This


Share this with your friends!