Alguna ves viste alguna web que usaba fuentes que vos no tenés en tu PC? Bueno, eso es "embedder" una fuente, osea insertarla, tomar la fuente no de tu PC, sino que de un archivo online por supuesto. Así como cuando embeddes un video de Youtube, que el video está justamente en YT pero lo estás viendo en por ejemplo un post de acá. Es eso mismo pero con fuentes. Y para eso se utilizan dos pequeños .JS
Información:
Compatible con: Interner Explorer (6, 7, 8, 9), Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome 1.0+, en iOS 2.0+, y Opera Mini (en éste puede haber ciertas incompatibilidades). Y obviamente cualquier reciente versión de Gegcko y WebKit. (*Los + representando en adelante). Se utilizará un .js (Api de Cufón) y otro .js que será la fuente convertida. Hay otros métodos menos sencillos, y que también en mi opinión son peores, ya que las fuentes no quedan "bien renderizadas" digamos, osea se ven todas feas sin definir muy bien, con cufón las fuentes se ven con unos bordes suaves.
Primer paso - Obtener la API
Entramos a y descargamos la API dando click derecho en botón "Download" y dando en "Guardar enlace como.." (o parecido) y listo dejan a mano el cufon-yui.js ese que bajamos ahí.
Segundo paso - Obtener .font
Ahí mismo en la página de Cufón, le damos al primer "Examinar" y ahí buscamos la fuente a utilizar (formatos permitidos: TTF, OTF, PBF), tildamos la opción 'The EULAs of these fonts allow Web Embedding (without Adobe Flash)' y seguimos bajando. Tildamos los siguientes chekbox's: 'Uppercase', 'Lowercase', 'Numerals' y 'Punctuation'. Seguimos bajando y en el sector "Performance & file size" tildamos el siguiente chekbox: 'No thanks, use the font's own value', luego seguimos bajando, en la última sección llamada "Terms", tildamos en 'I acknowledge and accept these terms', y ahora click en 'Let's do this!', esperas un momentito y te aparecerá la ventana de descarga del .JS generado, el mismo lleva el nombre de la fuente y termina en .font (pero es un archivo .js).
Tercer paso - Subir los .JS
Ahora tenemos los dos .JS, vamos a subirlo en un hosting que brinde link directo, puede ser uno de archivos (Fileden.com por ejemplo, o Fileave.com -éste no lo probé-), o mismo un webhosting, como 000webhost.com o el webhost que utilizes. Lo importante es que sea el link directo al archivo.
Cuarto paso - Aplicar el código
Una ves tengamos los dos archivos hospedados, vamos a copiar y pegar el siguiente script dentro del HEAD de nuestra web:
<script src="LINK DEL JS1" type="text/javascript"></script>
<script src="LINK DEL JS2" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('.cufon1', { fontFamily: 'NOMBRE FUENTE' });</script>
Del código, editamos lo siguiente:
•LINK DEL JS1 - Link del primer archivo .js, la API de Cufón.
•LINK DEL JS2 - Link del segundo archivo .js, el .font (la fuente).
•.CUFON1 - Aquí la clase, el punto por delante (.) indica que es una clase.
•NOMBRE FUENTE - Aquí ponemos el nombre de la fuente que subimos.
*Para saber correctamente el nombre de la fuente, abrimos desde nuestra computadora la fuente (TTF, OTF, PBF). Verás "Nombre de fuente". El nombre que se indica allí, es el nombre a poner aquí.
Quinto paso - Aplicar fuente
Como vimos en el paso anterior, en "Aquí la clase" (donde yo puse "cufon1" -con un punto-), es lo que hará que nuestro texto se aplique con nuestra fuente. Para eso utilizaremos HTML. Al texto que quieres darle esa fuente, tendrá que estar dentro de un span (preferentemente) indicando la clase que pusimos en el script (esta ves sin punto claro está):
Como por ejemplo:
<span class="cufon1">Acá el texto</span>
→ (CUFON1 = Indicamos la clase)
Te podés saltear este quinto paso, explico: Como se ve en el primer código que va en el HEAD, se indica .Cufon1, pero si por ejemplo querés aplicarlo para una parte específica de tu web donde ya tiene algún estilo o algo, simplemente ponele el que tiene y no Cufon1. También si querés especificar uno pero por ID, entonces cambiar el punto por un numeral #. Por ejemplo: #title-post para suponer que fuera el título de un post en nuestra página. En fin, ahí se especifica a qué aplicar esa fuente.
Explicaciones y otra cosa
Como ven en el cuarto paso, es ahí donde indicamos que clase reemplazaremos por ese tipo de fuente, y en el quinto es donde especificamos la clase al texto, bueno, pero no precisamente tiene que ser así, de más está decir que puedes hacer hasta el paso cuatro (4) y listo, "trabajo completo", ya que en ves de aplicar una clase cualquiera, simplemente especificamos una ya existente, como por ejemplo en un blog: especificas la clase de los títulos, y con esto todos los títulos de las entradas del blog aparecerán con esa fuente. En fin: el quinto (5) paso es totalmente opcional/según el caso.
(cc) Por Pante