martes, 21 de febrero de 2012

Solución al atributo @font-face en Blogger

El atributo @font-face, es una regla CSS3 que permite insertar archivos de fuentes para utilizarlas en algún sitio web. El beneficio de este atributo es que permite dar un aire distinto a un sitio mediante fuentes no estándar.



Por desgracia para muchos, es necesario alojar los archivos desde el mismo servidor para evitar así el robo de fuentes (Algunas fuentes incluyen una licencia y hay que pagar por usarlas) y según los estándares web ésta atribución debe respetarse por cada navegador.

¿Cuál es el problema con Blogger y en qué se ve afectado?

El problema es que Blogger no posee un servidor propio para alojar archivos (Obviando Google Sites ya que no es propio de Blogger), por lo que el hotlink es obligatorio.

La solución:

Primeramente hay que mencionar de que existe Google Web Fonts, con una gran cantidad de fuentes de calidad, pero si quieres optar por usar las propias, puedes seguir este tutorial.

La solución radica en conseguir un servidor en el cual alojar todos los archivos necesarios, que sea propio y así podamos corregir este detalle.

El tutorial:

Parte 1: Introducción a @font-face:

El atributo @font-face es muy fácil de usar pero conlleva trabajo, lo primero que debes conocer es su síntaxis, la cual es la siguiente:
@font-face {
font-family: nombrefuente;
src: url('archivo-de-fuente.ttf') /*Fuente otros navegadores*/
    ,url('archivo-de-fuente.eot'); /* Fuente IE */
}

En donde "nombrefuente" corresponde al nombre de la fuente que usaremos, puede ser cualquiera.

Los valores "archivo-de-fuente.ttf" y "archivo-de-fuente.eot" corresponden a las URL de estos archivos, deberán reemplazarlas por las direcciones correspondientes.

Y para añadir la fuente a algún selector bastaría con hacerlo de la siguiente forma:
font-family: nombrefuente;

Ahora bien, si deseas un conversor de fuentes a formato eot, puedes usar el siguiente (No incluye una lista de fuentes baneada, puedes subir cualquiera a él):

Subes la fuente en formato .TTF o .OFT y creará un archivo .zip con el que podrás extraer los archivos necesarios.

Parte 2: Subiendo tus fuentes y solucionando el problema del hotlink:

Primero, es necesario tener un host (Ya sea gratuito o sea de pago), el cual soporte htaccess (Recomiendo Horizon Host ya que tiene un ancho de banda de 100 GB mensuales).

Posteriormente cuando ya hayas creado tu host, deberás subir el archivo a alguna carpeta y añadir este archivo al directorio en el cual subirás tus fuentes (Es un archivo .zip el cual incluye uno llamado .htaccess, descomprímelo, súbelo y listo).

Reemplazas las URL de los atributos CSS y con eso debería funcionar.

Importante: Si no consigues subir tu archivo o no consigues hacer funcionar tus fuentes, puedes enviarnoslas (Ya convertidas previamente) y nosotros mismos las alojaremos, pero la condición es que las compartamos en esta sección.

No hay comentarios:

Publicar un comentario