Utilizar cualquier tipografía con @font-face en Blogger

Imagina que diseñas un sitio web, ahora imagina que utilizas un tipo de letra extravagante y te queda fantástico, pasa el tiempo y visitas tu página desde otro ordenador y, ¡sorpresa! la fuente tipográfica es Arial, Times New Roman o cualquier otra menos la que elegiste, ¿por qué? esto ocurre debido a que la computadora del visitante no tiene la fuente instalada.

Hay 4 soluciones:

1. Solicitar a los visitantes que instalen nuestra maravillosa fuente tipográfica (bueno, realmente no creo que sea una solución).
2. Utilizar Scripts (los cuales son... no muy ligeros por no decir pesados)
3. Usar las Google Font API.
   
4. Usar CSS (el método más fácil en una página web "normal", pero complicado en Blogger).

---

Iván me pregunta cómo usar la fuente Avatar en su blog de Blogger usando CSS, y como un blog viene siendo como un diario, contaré lo que fui aprendiendo y trataré de explicarlo de manera simple, entendiendo que simple no implica que sea fácil.

@font-face es una propiedad con la que podemos usar cualquier tipografía sin necesidad de tenerla instalada, esto es poco conocido pero no es nada nuevo, ha sido implementada en Internet Explorer desde la versión 5 usando el formato de fuentes Embedded Open Type (.eot).

El código era muy sencillo, bastaba agregar esto al comienzo de nuestro CSS:

 @font-face {
font-family: 'Nombre-de-fuente-mágica';
src: url("url-de-archivo/fuente-mágica.eot") format("eot");
}

Con el código anterior se cargaba la fuente mágica junto con el sitio, luego debía definirse en qué parte aplicarla, por ejemplo en los títulos:

.post h3 {
font-family:'Nombre-de-fuente';
}


Luego, la W3C.org colocó a @font-face en los estándares del CSS3 y los demás navegadores lo implementaron pero usando el formato True Type (.ttf), lo cual suponía cargar dos veces la misma fuente pero en 2 formatos:

/* Para Internet Explorer
*/
@font-face {
font-family: 'Nombre-de-fuente';
src: url("url-de-archivo/fuente-mágica.eot") format("eot");
}

/* Para el resto de los navegadores */
@font-face {
font-family: 'Nombre-de-fuente';
src: url("url-de-archivo/fuente-mágica.ttf") format("truetype");
}

En muchas páginas web normales funcionaba y yo hice esto aquí en mi blog allá por el 2010, pero no se mostraba en Mozilla Firefox.

Casualmente por esas fechas Pizcos publicó algo al respecto para que funcione en todos los nevegadores, pero el problema seguía con Firefox porque para añadir las fuentes era necesario un código exageradamente largo (además de que el peso de la fuente original aumentaba unas 3 veces).

---

Usé su método y me olvidé del asunto hasta 2012 cuando me di cuenta de que el servidor de mis fuentes para Internet Explorer dejó de funcionar.

Investigué por qué Firefox da tanto problema y en el sitio de Desarrolladores de Mozilla dicen:

En Gecko, las fuentes web están sujetas a la restricción del mismo dominio (los archivos de fuentes deben estar en el mismo dominio que la página que los utiliza), a menos que los controles de acceso HTTP sean utilizados para relajar esta restricción.

Esto significa que para que las fuentes funcionen en ese navegador deben tener una url del tipo:

miblog.blogspot.com/fuente-mágica.ttf

Y eso en Blogger es imposible porque dependemos de servidores externos.

Regresando a la publicación de Pizcos noto que él indica que para Firefox usó baseencode64 y que eso le generó el largo código.

Como no sabía que es baseencode64 investigué y según Wikipedia:

Base 64 es un sistema de numeración posicional que usa 64 como base. Es la mayor potencia de dos que puede ser representada usando únicamente los caracteres imprimibles de ASCII.

Dicho de forma fácil y para los fines de esta publicación, con Base 64 podemos representar cualquier cosa (como imágenes, videos, incluso fuentes) empleando caracteres, sean letras, números, etc los cuales sí pueden alojarse en Blogger.

Por ejemplo, esta imagen sprite de Aang en el Estado Avatar se incrusta con un código HTML como este:

<img src="http://url-de-la-imagen.jpg" />

Usando el conversor Base 64 de OpinionatedGeek.com la imagen pasa a ser:

R0lGODlhIAAdAPcAAAAAAFLOQmM5MZRaSpzW3qUxGKWtrbXn7705Ib3n79ZCId6USueUGOf37++lMe+lY+/39/e1Sve9hP/Opf/Wtf/evf///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEAAAEALAAAAAAgAB0AAAj+AAMIHEiwoMGDCBMqXMiwocOHEAsamEjRQESDAAA0IMCRY4OMFwUCeCABQoKTJyFIeADg4siSJlEmgKCSJcSRJGPKnDlhZUuHLyfQ3Emzp82GOCVMEKqzqNGjC182gLB0qFMIDXwyzJjzQFGaVGl69fkzIYAJXQ94pcAWgtqxDyaURQhgZcm3a92+rSlh7sGketVCoBAYLlSzJIUKrtBWsFG/iJUWZUuB6eObiSdQZrtUa0QADEI7iEDaQWgGkLcWKIBAgevXChCsTp3QQOjVrRU4cC27QGiLDQ0kIJBANOnjphkMTwB8oQGTEACwhh27AADozRUCWNCA5XTYskcqNlhAG2NG48cjJM9Yni4D0wPYD3iPOiQAAQMGCBBwH7/+9tqx15KA7QUEADs=

Y para incrustarla se debe especificar el tipo de archivo y la codificación:

<img src="data:image/gif;base64,Aquí va el código en Base64" />

---

Ahora aplicaremos esto usando fuentes tipográficas, pero antes algo de historia:

Durante el año 2009, se empezó a desarrollar el formato Web Open Font Format (.woff) recomendado por el Grupo de Trabajo de Tipos de Letra Web del World Wide Web Consortium (W3C) y en 2012 Firefox, Internet Explorer 9, Chrome y Opera soportan este formato.

En su mayoría, WOFF contiene tipografías TTF con compresión, además de metadatos. Su objetivo es permitir la distribución de tipografías desde un servidor a un equipo cliente en una red, en favor del ancho de banda.

Usando Base 64 y fuentes en formato WOFF podemos lograr que @font-face funcione en Blogger con todos los navegadores modernos en cuatro pasos:

1. Conseguir la fuente mágica
2. Convertirla a WOFF
3. Codificarla en Base 64
4. Incrustarla (en la plantilla, en un elemento HTML o alojarla en un archivo CSS)

Para convertir la fuente al formato WOFF, existen muchas herramientas en línea, por ejemplo orionevent. Si la fuente está en TTF recomiendo usar ttf2woff.com por la facilidad de uso.

Ya en WOFF la pasamos a Base 64 para lo cual también existen muchas herramientas en línea, podemos usar otra vez la de OpinionatedGeek.com. Aunque recomiendo Dataurl.net porque la conversión es inmediata.

Ell código en Base 64 podemos añadirlo a la plantilla antes de ]]></b:skin> así:

@font-face {
font-family: 'NOMBRE-FUENTE-MÁGICA';
src: url(data:font/woff;charset=utf-8;base64,CÓDIGO-BASE-64-DE-LA-FUENTE-MÁGICA) format('woff');
}

En mi opinión es molesto tener tanto código en la plantilla así que podemos hacer dos cosas:

1. Añadirlo a un elemento HTML, para esto vamos a Diseño, Añadir un gadget, HTML/Javascript y pegar el código entre etiquetas style, así

<style type='text/css'>
@font-face {
font-family: 'NOMBRE-FUENTE-MÁGICA';
src: url(data:font/woff;charset=utf-8;base64,CÓDIGO-BASE-64-DE-LA-FUENTE-MÁGICA) format('woff');
}
</style>

2. O crear un archivo CSS y alojarlo en un servidor externo, abrimos el blog de notas, pegamos el código CSS (sin las etiquetas style), lo guardamos y le cambiamos la extensión de .txt a .css, luego abrá que alojarlo en un servidor, obtener la url y añadir este código en el head de nuestro blog:

<link href='http://url-del-css-con-la-fuente-mágica.css' rel='stylesheet' type='text/css'/>

No hay que olvidar que este código solo sirve para incrustar las fuentes, falta añadir otro que indique dónde se mostrarán, por ejemplo en las entradas:

.post {
font-family:'Nombre-de-fuente';
}

Eso es todo. Para mí fue muy difícil, complicado y tedioso descubrir la manera para usar las fuentes en todos los navegadores pero ahora que lo pienso no fue tan difícil con Base 64 y navegadores modernos.
Ante cualquier duda pregunten, pues quizá omití u obvie algo.

NOTA:
En mi caso para Internet Explorer tuve que añadir la META X-UA-Compatible para que el blog se muestre como en la versión 9:

<meta content='IE=9' http-equiv='X-UA-Compatible' />

Para quien tenga una página con servidor propio supuestamente no es nesario usar Base 64, solamente debe convertir sus fuentes a WOFF.

Debemos ser prudentes al añadir fuentes exóticas ya que podrían complicar la lectura de los visitantes, además de que generan un peso adicional que en mi caso es de unos 50 MB al día.

Referencias:
Convertir fuentes TTF a EOT, WOFF y SVG para @font-face
@font-face Cambia el tipo de fuente con CSS