The Dai Li // An Avatar: the Last Airbender Topsite

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

font-face
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.


Ir al formulario 5 Comentarios:

Iván dijo...

Gracias Bonzu, esto era lo que esperaba, pero aún sigue sin funcionar, no porque esta entrada esté mal, sino que el programa con que diseñé el diseño para el blog no permite el @font-face, me pone muy triste y furioso, pero voy a tener que volver a diseñar por otro método. Igualmente está explicado todo correctamente y fácil de entender, mientras tanto guardaré esto en favoritos y me pondré a pensar cómo hacer el diseño. Muchas gracias!!
Atte: Iván, administrador de Avatar-Site

Claublog dijo...

A pesar de que llevabas meses sin publicar hasta hace relativamente poco, veo que tus conocimientos no han menguado nada :)

Bonzu Pipinpadaloxicopolis III dijo...

Iván, los programas de edición web no se llevan bien con Blogger, por loco que parezca solo se necesita del Bloc de Notas.

En tu caso lo primero es convertirla a WOFF, luego codificarla en Base 64, incrustarla (para los que usamos Blogger creo que lo mejor es en un elemento HTML) y por último indicar dónde se mostrará.

No entiendo bien cómo estás escribiendo los códigos porque no necesitas de programas para añadirlos (salvo los conversores en línea que cité en el post).

P.D. Un truco: presiona Control + F para encontrar lo códigos en tu plantilla.

Claudio que estuviera un año en hibernación no implica que perdiera la memoria :-p.

Iván dijo...

El programa se llama Artisteer, y creeme que el que te pre-diseñó esta web lo hizo con ese programa. El mismo tiene una serie de códigos que no permite incrustar las fuentes personalizadas, lo que hice lo hice más de 5 veces con el bloc de notas y con blogger, por eso cuando hablo del programa quiero decir que NO USO el mismo para incrustar la fuente sino que es el que no me permite colocarla debido al previo diseño que hay. Es un poco confuso pero bueno, estoy reemplazando los textos por imágenes y los títulos por fuentes "lindas" estándares.

Gracias por tu ayuda Bonzu!

Bonzu Pipinpadaloxicopolis III dijo...

He seguido a Ariane unos cuantos años y nunca he visto que mencione ese programa en sus tutoriales, en realidad solo usa el navegador y el Bloc de notas. En todo caso si ella hubiera usado ese programa para el diseño base de esta plantilla eso supondría que yo tampoco podría usar el @font-face. Aunque es muy extraño lo que cuentas porque ninguna definición CSS ni ningún programa podría impedirte añadirlo directamente a Blogger.

Pero haces bien, usar imágenes es lo más práctico para textos cortos :-D.

Publicar un comentario en la entrada

De preferencia lea mi política de comentarios.

Puede comentar con su cuenta Google (Google +, Blogger, Youtube, etc.)

En caso de que usted no disponga de una cuenta seleccione Nombre/URL donde dice "Comentar como:" coloque su nombre o pseudónimo, y en URL la dirección de su página (como la de Facebook, Twitter u otra) y recuerde que la dirección web debe iniciar con http://

Al comentar puede utilizar algunos códigos HTML
En negrita <b>texto</b>
En itálica <i>texto</i>
Crear un enlace <a href="url-de-la-página">Texto</a>


Si el formulario anterior no funciona puede enviar su comentario utilizando los métodos antiguos:
En una pequeña ventana emergente
⇧ Ir arriba Comentar en una nueva pestaña