Introducción
Durante estos días, he estado trabajando en el diseño del nuevo sitio con Pelican, y dado que la solución, es bastante más rápida, como ya afirmó Joe Di Castro, que con WordPress, estoy trabajando en darle una mejor presencia, a costa de hacerlo algo mas lento (como no podía ser de otra forma). Así, estoy añadiendo mis propios scripts en javascript para mejorar la visibilidad de las imágenes, o incluso embebiendo fuentes en css, por supuesto la fuente de Ubuntu, que me parece muy cómoda para leer.
Si bien, he encontrado en otros sitios información al respecto de como embeber fuentes en hojas de estilo, lo cierto es que no he encontrado ninguna que reuniera toda la información, ni proporcionara herramientas para poder convertir tipos de letra para poder utilizarlos.
Así es como queda el sitio utilizando la fuente embebida de Ubuntu, en su estado actual:
Embeber fuentes
Convirtiendo tipografías
El primer paso consiste en convertir las fuentes para que estén disponibles y sean visibles para todos los navegadores, puesto que al parecer, no todos los navegadores soportan todos los formatos. Esto es lo que tiene la falta de estandarización.
Convertir a eot
Para convertir a eot, he utilizado una aplicación descargada de gtihub, ttf2eot. La descargas, descomprimes, compilas, y hecho. Lo que se resume en los siguientes comandos:
wget https://github.com/greyfont/ttf2eot/archive/master.zip unzip master.zip cd ttf2eot-master/ make
Con esto ya tienes ttf2eot para utilizar. Si la quieres utilizar en cualquier directorio, tendrás que copiarla a «/usr/bin», por ejemplo. Aunque no te lo recomiendo, salvo que lo vayas a utilizar muy a menudo. Lo mejor es que copies esta herramienta en el directorio donde tienes la fuente. De esta manera, evitaremos llenar nuestro equipo de aplicaciones «de un solo uso».
El problema de esta herramienta, es que solo permite convertir una fuente. Es decir vamos de fuente en fuente. Para solucionarlo, podemos escribir un sencillo script, que nos permite hacerlo de forma masiva:
#!/bin/bash
for afile in `ls *.ttf`
do
output=${afile:0:(-3)}eot
echo convert from $afile to $output
ttf2eot $afile $output
done
Convertir a svg
Para convertir a svg, necesitarás por un lado, tener instalada la máquina virtual de java, y por otro, batik-ttf2svg, que es la herramienta que te facilitará la conversión.
Para descargar esta herramienta, y poder utilizarla solo tienes que copiar las siguientes líneas:
wget https://apache.rediris.es/xmlgraphics/batik/binaries/batik-1.7.zip unzip batik-1.7.zip cd batik-1.7.zip cp *.jar DONDETENGASLASFUENTES cp -r lib/ DONDETENGASLASFUENTES
Para convertir una fuente a formato svg, tendrás que ejecutar el siguiente comando:
java -jar batik-ttf2svg.jar [ARCHIVO_TTF] -o [ARCHIVO_SVG] -id [ID]
Donde en particular ID identifica el atributo id a utilizar posteriormente en nuestro css.
Al igual que sucedía con la otra herramienta, esta tampoco permite realizar conversiones de forma masiva. Esto lo puedes resolver de forma similar a la anterior, con un sencillo script:
#!/bin/bash
for afile in `ls *.ttf`
do
id=${afile:0:(-3)}
output=${afile:0:(-3)}svg
echo convert from $afile to $output
java -jar batik-ttf2svg.jar $afile -o $output -id $id
done
El código css necesario
El siguiente paso es escribir el código necesario para poder utilizar la fuente en el sitio web. Voy a particularizar para la fuente de Ubuntu, que es la que he escrito recientemente, pero es aplicable a cualquier fuente, como te puedes imaginar.
Con el código que ves a continuación defines los diferentes formatos de letra, con sus correspondientes combinaciones. Normal, itálica, negrita, negrita + itálica, etc. En varios sitios, he encontrado la definición para hacer una fuente, pero no he encontrado donde definir utilizando todas de forma simultánea. Finalmente, ha sido mediante prueba y error, y mirnado algún ejemplo. Pero no ha sido fácil. Además la itálica, solo acepta la descripción «italic», no «oblique». En fin.
@font-face {
font-family: 'Ubuntu';
font-weight: 400;
src: url('../font/ubuntu-r-webfont.eot');
src: url('../font/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ubuntu-r-webfont.woff') format('woff'),
url('../font/ubuntu-r-webfont.ttf') format('truetype'),
url('../font/ubuntu-r-webfont.svg#ubunturegular') format('svg');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: url('../font/ubuntu-b-webfont.eot');
src: url('../font/ubuntu-b-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ubuntu-b-webfont.woff') format('woff'),
url('../font/ubuntu-b-webfont.ttf') format('truetype'),
url('../font/ubuntu-b-webfont.svg#ubuntubold') format('svg');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: url('../font/ubuntu-bi-webfont.eot');
src: url('../font/ubuntu-bi-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ubuntu-bi-webfont.woff') format('woff'),
url('../font/ubuntu-bi-webfont.ttf') format('truetype'),
url('../font/ubuntu-bi-webfont.svg#ubuntubold_italic') format('svg');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
src: url('../font/ubuntu-ri-webfont.eot');
src: url('../font/ubuntu-ri-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ubuntu-ri-webfont.woff') format('woff'),
url('../font/ubuntu-ri-webfont.ttf') format('truetype'),
url('../font/ubuntu-ri-webfont.svg#ubuntuitalic') format('svg');
font-weight: normal;
font-style: italic, oblique;
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 200;
src: url('../font/ubuntu-l-webfont.eot');
src: url('../font/ubuntu-l-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ubuntu-l-webfont.woff') format('woff'),
url('../font/ubuntu-l-webfont.ttf') format('truetype'),
url('../font/ubuntu-l-webfont.svg#ubuntulight') format('svg');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 200;
src: url('../font/ubuntu-li-webfont.eot');
src: url('../font/ubuntu-li-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ubuntu-li-webfont.woff') format('woff'),
url('../font/ubuntu-li-webfont.ttf') format('truetype'),
url('../font/ubuntu-li-webfont.svg#ubuntulight_italic') format('svg');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 600;
src: url('../font/ubuntu-m-webfont.eot');
src: url('../font/ubuntu-m-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ubuntu-m-webfont.woff') format('woff'),
url('../font/ubuntu-m-webfont.ttf') format('truetype'),
url('../font/ubuntu-m-webfont.svg#ubuntumedium') format('svg');
}
Otras alternativas
Existen páginas que te permiten realizar parte del trabajo, o prácticamente todo el, como puede ser, Font Squirrel, que tiene un generador de fuentes, muy, pero que muy completo. El inconveniente de este sitio, es que no termina de hacer la definición que has visto un poco más arriba, sino que define una «font-family» para cada fuente que subes, por tanto, posteriormente tienes que realizar un poco de trabajo, aunque, tienes la ventaja de que todas las conversiones te las puedes ahorrar, lo cual ya es una ventaja considerable.
Por otro lado, también tienes el repositorio de fuentes de Google, que es una opción muy interesante a tener en cuenta por dos motivos. Por un lado, te evitas hacer todo lo que has visto aquí, y por otro la carga del tipo de letra es mas rápido.
Conclusiones
Como has visto, existen diferentes herramientas y alternativas para realizar la conversión de fuentes. Desde las mas «manuales», donde vas a lo «Juan Palomo, yo me lo guiso, yo me lo como», pero que tienen su encanto, y que desde luego hay que tener en cuenta para usos masivos, o bien, las mas automáticas, donde, prácticamente obtienes el resultado final.