@font-face CSS. Fuentes web gratuitas. Problemas. Convertir woff, eot, ttf, otf, svg. Font converters (CU01046D)

REGLA @FONT-FACE

Para superar la limitación de tener que depender de las fuentes disponibles por parte de cada usuario se creó la regla @font-face que permite especificar un nombre y la localización (url) de un archivo con la fuente que se desea usar en una página web. De esta manera, cambia el concepto tradicional, ya que con @font-face podremos usar fuentes que hemos definido y localizado nosotros mismos, sin depender de las fuentes de que disponga el usuario. Ten en cuenta que @font-face está disponible en todos los navegadores modernos, pero que versiones antiguas de navegadores no admiten el uso de esta regla, de ahí que siempre debamos especificar una familia tipográfica genérica como alternativa de seguridad  para el caso de que una fuente especificada no pueda cargarse.

Una fuente es un archivo informático con la información necesaria para que un sistema operativo o programa puede mostrar un tipo de letra determinado. Por ejemplo, en Windows se dispone de la fuente “Arial” gracias a que dentro del sistema de archivos existe un archivo denominado arial.ttf. Si borramos ese archivo, la fuente deja de estar disponible. El tipo (formato o extensión) del archivo puede variar de unos sistemas a otros: extensiones habituales son ttf, otf, woff, svg, etc.

La extensión woff (Web Open Font Format) ha sido creada específicamente como tipo de fuente para desarrollos web y aspira a convertirse en un estándar. Sin embargo, la realidad es que no existe todavía un formato de archivo estándar que se haya impuesto para todos los navegadores.

El uso básico de la regla @font-face conlleva definir dos parámetros: por un lado, el “alias” o nombre con el que vamos a designar a la fuente cuando la empleemos en nuestras reglas CSS. Por otro lado, la ruta donde se localiza el archivo que contiene la fuente.

La sintaxis básica a emplear es de este tipo:

Con esta regla definimos un nombre de fuente p.ej. “burlesque” e indicamos una ruta del archivo donde está disponible esa fuente p.ej. burlesque.woff. En este caso hemos indicado simplemente el nombre del archivo, por lo que la ruta debe ser la misma donde se ubique el archivo css de estilos. Ahora este nombre de fuente puede utilizarse como se haría normalmente con los nombres de fuente en la propiedad font-family, por ejemplo h1 {font-family: burlesque, sans-serif; }

También es posible definir rutas de archivos alojados externamente indicando su url. Por ejemplo:

Y este nombre de fuente se podría aplicar por ejemplo en body { font-family: "Bitstream Vera Serif Bold", serif }

Tener en cuenta que siempre es recomendable dar al menos una familia genérica para indicar el tipo de fuente que se debería usar en el caso de que no se pueda cargar la fuente deseada.

Debido a que la regla @font-face se ha ido introduciendo en los últimos años y los diferentes navegadores han ido admitiendo formatos de fuentes distintos poco a poco, un “truco” al que recurren muchos diseñadores y programadores para garantizar que la mayor parte de navegadores usen la fuente deseada es especificar las rutas de los archivos fuente en distintos formatos, de modo que se usará el primero en ser reconocido por el navegador. Por ejemplo:

La regla @font-face permite que se especifique si se debe buscar la fuente primero en el ordenador del usuario y usarla en caso de estar disponible, antes que usar una fuente especificada mediante un archivo. Para ello se especifica el origen como local(“nombreDeFuenteEnSistemaUsuario”). Esto es lo que se hace en este ejemplo:

Se podrían especificar varios nombres de fuentes locales separados por comas si se desea.

LAS MEJORES FUENTES WEB GRATUITAS

Existen diferentes páginas web donde se ofrecen archivos de fuentes gratuitos. Es difícil decir cuál es la página que ofrece las mejores fuentes, entre otras cosas porque en estas páginas hay cambios contínuos y se van incorporando nuevas fuentes y nuevos formatos continuamente. A continuación damos una relación de sitios que permiten el uso de fuentes gratuitas, sin recomendar ninguno en concreto. Pruébalos y usa el que más te guste.

CONVERTIDORES DE FUENTES ONLINE

Muchas veces las fuentes que tenemos disponibles para descarga están en un solo formato como ttf y para asegurarnos de que se visualicen bien deseamos disponer de ellas en varios formatos. Los formatos más usados son: WOFF, EOT, TTF, OTF y SVG.

En principio usando TTF y EOT nos garantizamos que nuestra fuente sea reconocida por la mayoría de los navegadores, aunque si buscamos el máximo de seguridad convendría incluir los cinco formatos.

Existen distintos convertidores on-line, entre los cuales el de Font Squirrel es quizás el más usado y el que mejores críticas recibe.

Ten en cuenta que al realizar la conversión la fuente convertida será muy similar a la original, pero quizás no exactamente igual (pueden aparecer pequeñas diferencias en el espacio entre letras por ejemplo). Recomendación: no trates de cuadrar una página web “al milímetro”. Considera siempre que puede ocurrir que la fuente que se cargue no sea exactamente la que tú habías previsto.

PROBLEMAS CON @FONT-FACE

La regla @font-face se ha introducido en los últimos años y su estandarización todavía no es suficiente, aunque su uso es cada vez más amplio. Te podrás encontrar con situaciones como que:

a) Un determinado navegador no reconozca la regla @font-face, con lo cual recurrirá a la fuente estándar que hayas definido, o si no la has definido, a la fuente por defecto.

b) Un determinado navegador no reconozca el formato de la fuente que hayas indicado.

c) Un determinado navegador no responda bien a la sintaxis que hemos descrito y sea necesario aplicar “un parche” o código específico para ese navegador.

d) Algunas reglas CSS no se aplican bien con un determinado formato de fuente. Por ejemplo, quizás te encuentres que al aplicar text-transform: uppercase; con algunas fuentes no te funcione.

Para muchos de los problemas que genera font-face existen soluciones específicas o parches de los que no vamos a hablar porque supondría entrar en detalles muy concretos y no es ese nuestro objetivo. Recuerda que el objetivo de este curso es conocer la lógica de CSS y sus aspectos más importantes, sin entrar en detalles relativos a navegadores concretos.

Algunos programadores o diseñadores trabajan con fórmulas alternativas a font-face (normalmente scripts escritos en algún lenguaje de programación) buscando evitar los problemas que les surgen.

EJERCICIO EJEMPLO RESUELTO DE USO DE @FONT-FACE

Usando el código HTML de base que venimos empleando a lo largo del curso, y usando la regla @font-face, definir tres tipos de letra distintos (obtenidos desde alguna de las fuentes web gratuitas que hemos indicado) para las etiquetas h1, h2 y p. Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

SOLUCIÓN

Nosotros vamos a usar las siguientes fuentes:

Títulos h1: fuente “Bubblegum Sans”. Nos hemos descargado la fuente en formato otf (BubblegumSans-Regular.otf) desde fontsquirrel.com

Títulos h2: fuente “Just Gotta Smile”. Nos hemos descargado la fuente en formato ttf (Just Gotta Smile.ttf) desde dafont.com.

Párrafos p: fuente “Alef”. Nos hemos descargado la fuente en formato ttf (Alef-Regular.ttf) desde google.com/fonts

Si quieres usar otras fuentes no hay problema.

Junto al archivo css de definición de estilos debemos colocar los archivos de las fuentes (los tres archivos que hemos citado, en nuestro caso de extensión otf, ttf y ttf). El código básico que resuelve el ejercicio y el resultado a obtener sería el siguiente (escribe el código y visualiza el resultado; si no obtienes el resultado previsto sigue leyendo):

Nota: hemos puesto un fondo amarillo y letra arial para los elementos sin letra definida; además hemos dotado de un tamaño de letra adecuado a los elementos h1 y h2. También hemos definido el tipo de letra específicamente para los elementos a (links) dentro de párrafos porque éstos no heredan el tipo de letra definido.

¿Qué problema más común nos podemos encontrar con este código? Que algunos navegadores no reconozcan el formato de la fuente. Para tener mayor seguridad en cuanto a que los navegadores apliquen la fuente deseada vamos a generar las fuentes en los formatos más comunes.

En nuestro caso accederemos a un servicio web gratuito para convertir fuentes, en concreto vamos a usar http://www.fontsquirrel.com/tools/webfont-generator y subimos los ficheros fuente que tenemos (BubblegumSans-Regular.otf, Just Gotta Smile.ttf y Alef-Regular.ttf) y nos descargamos el archivo zip con las fuentes convertidas a distintos formatos.

Ahora para cada fuente tendremos cuatro archivos, cada uno de los cuales corresponde a una extensión. Por ejemplo para BubblegumSans-Regular ahora tendremos cuatro archivos como bubblegumsans-regular-webfont.woff, bubblegumsans-regular-webfont.ttf, bubblegumsans-regular-webfont.eot, bubblegumsans-regular-webfont.svg. Para las otras fuentes lo mismo, con lo cual en total tendremos 12 archivos.

Ahora escribimos el código indicando que en caso de no reconocerse un formato, se utilice el siguiente disponible. Ten en cuenta que debes colocar los 12 archivos con las fuentes en la misma ubicación en la que tengas el archivo css de estilos. El código quedaría así:

Con este código tenemos mayores garantías de que la visualización será correcta en la mayor parte de los navegadores. Pero la garantía no es del 100%, de ahí que siempre sea conveniente especificar qué fuente debe mostrarse en caso de no poder cargar la deseada. En nuestro caso hemos indicado “arial”.