Micaela 22 de octubre de 2009 a las 11.30
   Imprimir artículo
elWebmaster.com

Embeber fuentes en tu sitio web: la guía definitiva


fuenteEl embebimiento de fuentes utilizando @font-face es verdaderamente un arte oscura y compleja que debe ser dominada.

Es por eso que en esta nota te traemos la guía maestra sobre cómo embeber fuentes en tu sitio web. ¡Esperamos que te sea de utilidad!

Formatos de Fuentes

Hablando de forma general, hoy en día, una fuente de nuestro sistema tendrá uno de estos dos formatos: TrueType (con una extensión de archivo .ttf) u OpenType (con una extensión de archivo.otf). Si bien sería genial tirar una fuente de estas en una web y linkearla, nos enfrentamos a dos problemas mayores:

1)      La licencia

2)      El soporte del navegador

Licenciación

La concesi√≥n de licencias es uno de los mayores obst√°culos. Puede ser dif√≠cil encontrar una fuente que realmente funciona dentro de la est√©tica general de un dise√Īo. Es la raz√≥n por la que hemos tenido que recurrir a la exportaci√≥n de im√°genes sIFR o Cufon.

Incluso muchas fuentes libres tienen limitaciones en cuanto a cómo pueden ser utilizadas, muchas veces requieren instrucciones específicas sobre la vinculación de nuevo a la fuente original, o sólo se permite su uso en sitios no comerciales.

En estos días, una serie de recursos están surgiendo, especialmente los dedicados a la incrustación de fuentes. Un buen comienzo para encontrar la fuente adecuada para nuestro proyecto sería Font Squirrel. Font Squirrel incluso proporciona kits @font-face para hacer que la aplicación en nuestro sitio web sea fácil. Sin embargo, incluso estos kits no dan soporte de navegadores completo.

Soporte de Navegadores

El soporte de navegadores es el mayor problema. El embebimiento de fuentes con una fuente TrueType u OpenType sólo funciona de esta forma en Firefox 3.5, Safari 3.1, y Opera 10. (Lo puedes permitir en tu copia de Chrome 2 utilizando la línea de comando switch.)

Pero lo podemos mejorar todavía más. Podemos lograr que funcione en Internet Explorer 4+, Chrome 0.3+, Opera 9+ e incluso podemos lograr un poco de acción móvil en Safari.

EOT

Internet Explorer soporta un tipo de formato particular llamado Embedded OpenType que proporciona algo de control sobre dónde y cómo se permite embeber la fuente. Necesitarás convertir tu TTF al formato EOT. Microsoft pone a nuestra disposición una herramienta llamada WEFT pero no siempre funciona. Por suerte, hay una herramienta de línea de comando llamada TTF2EOT que puede convertir tu fuente.

Si tienes un archivo OTF, necesitar√°s convertirlo a TTF antes de pasarlo a EOT. FontForge se puede utilizar para llevar a cabo esto.

Haz clic aqu√≠ para ver la captura de pantalla de la conversi√≥n de OTF a TTF ¬Ľ

Como verás pronto, tener el archivo en formato TTF nos ayudará en los próximos pasos.

SVG

Con TTF/OTF y EOT, tenemos cubiertos los navegadores decentes pero el toque de gracia es a√Īadir m√°s formatos de fuente a la mezcla: SVG. Las fuentes SVG son soportadas por Chrome 0.3+ sin tener que usar un hack de l√≠nea de comando, junto con Opera 9 y iPhone OS 3.1.

Existe una aplicación Java llamada Batik que permite exportar a formato SVG, ésta puede echarse a andar desde la línea de comando, y al hacerla andar deberás especificar el parámetro del ID. La ID es importante a la hora del CSS.

  1. java -jar batik-ttf2svg.jar ./MuseoSans-500.ttf -o museo.svg -id museo

Una de las preocupaciones en la exportaci√≥n a SVG es el tama√Īo del archivo. Inmediatamente notamos que la fuente de 29k estaba pasando m√°s de 100k. La principal raz√≥n fue el n√ļmero de elementos hkern que, supongo, se dirigen a kerning. Sin embargo, deber√≠as ser capaz de eliminarlos sin afectar mucho la muestra de tu fuente, pero disminuyendo en gran medida el tama√Īo del archivo. La otra cosa que notamos fue glyph-name=”null” en todos los nodos glyph. Estos se pueden eliminar sin afectar a la visualizaci√≥n de la fuente. Una vez hecho las fuentes SVG ser√°n m√°s peque√Īas que la fuente TrueType original que se hab√≠a convertido.

CSS

Ahora que tenemos nuestros tres archivos-TTF (o OTF), EOT y SVG-es tiempo de comenzar con el CSS.

  1. @font-face {
  2.   font-family: 'GothicCustom';
  3.     src: url("LeagueGothic.eot");
  4.     src: local('League Gothic'),
  5.        url("LeagueGothic.svg#lg") format('svg'),
  6.        url("LeagueGothic.otf") format('opentype');
  7. }

El nombre de familia fuente que especifiquemos aquí es arbitrario.

La sintaxis SVG posee una cosa particular a notar, y esto es el anchor de ID luego del nombre de fuente. Especif√≠ca la ID que utilizaste cuando realizaste la conversi√≥n SVG. De forma alternativa, abre la fuente SVG y aseg√ļrate que el elemento fuente posee un ID.

  1. <font id="lg">

Especificar la familia fuente funciona de forma normal. Sólo especifíca el nombre de fuente que utilizaste en tu declaración @font-face.

  1. font-family: 'GothicCustom', 'Arial Narrow', sans-serif;

Subconjuntos

En la captura de pantalla, dimos una demostraci√≥n r√°pida de c√≥mo hacer subconjuntos de fuentes limpiando los caracteres que no van a ser utilizados en la fuente final. ¬ŅPor qu√© quieres hacer subconjuntos de fuentes? Hace que el archivo sea m√°s peque√Īo. Algunos archivos de fuentes f√°cilmente pesan 200k. Eso es mucho para descargar cuando la gente no lo necesita.

Si optimizas tus im√°genes ¬ŅPor qu√© no hacerlo con tus fuentes?

Bug transformador de texto

Hay una advertencia a tener en cuenta al realizar subconjuntos. Una declaración text-transform: uppercase es todo lo que se necesita.

  1. <div>About</div>
  2. div { text-transform:uppercase; }

Esto funciona bien en Firefox y Safari, pero Opera e Internet Explorer ambos parecen hacer decidido el uso de una fuente para un car√°cter en particular observando el car√°cter en min√ļscula en primer lugar. Esto quer√≠a decir que estaba usando los caracteres en may√ļsculas de una fuente de reserva. Eso es ciertamente menos que ideal.

Por supuesto, siempre puedes cambiar el c√≥digo fuente HTML para que sea may√ļscula, si estabas dispuesto a llegar a la muerte en la eliminaci√≥n de los glifos.

Imprimir hojas de estilo

Las fuentes personalizadas también funcionan bien con las hojas de estilo de impresión. No era como el uso de técnicas de reemplazo mediante una imagen y luego tener que recurrir a una fuente del navegador aburrido para imprimir. Se siente bien la impresión de una página de nuestro sitio que todavía utiliza las mismas fuentes, como lo que vimos en la pantalla.

Fuente: Tips, Tricks & Bookmarks on Web Development


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (12)

  1. 23r9i0 dice:

    Hola, antes de nada merci por esta entrada referente al @font face.
    Mira estoy experimentando y tengo unas dudas que me gustaria hacerte.
    El tema de licencias en la fuente que he elegido me pone:
    Rockwell (OpenType)
    Fuente Open Type, Firmado digitalmente, TrueType Outlines
    Nombre: Rockwell
    Tama√Īo de archivo: 57 KB
    Versión: Versión 1.65
    Digitized data copyright (C) 1992 – 1997 The Monotype Corporation. Rockwell¬ģ is a trademark of The Monotype Corporation which may be registered in certain jurisdictions.
    Portions copyright Microsoft Corporation. All rights reserved.

    No tengo muy claro si puedo o no usarla en una web?
    Luego el problema de los soportes de los navegadores, yo uso firefox ultima version y por ejemplo el archivo eot creado con el programa que facilita microsoft funciona pero tu comentas que suba la fuente original y la fuente eot solo sea para IE, y me pierdo con el resto de los navegadores, me refiero con chrome, safari, y para el iphone de momento no pienso en el, jeje.
    Bueno espero no preguntarte cosas dificiles de responderme.
    Gracias!!

  2. raul dice:

    Muy buen articulo, lo que me parece es un poco co√Īazo lo de tener que adaptar las fuentes. ¬ŅNo se ralentiza la p√°gina al cargar con tantas fuentes?

    Por cierto la palabra embeder no existe, se dice incrustar.

    Saludos

  3. Alejandra dice:

    Con los subconjuntos tienes el problema del peso resuelto.
    Por otra parte, el concepto de incrustar no es el mismo que el de embeber. La palabra no existe, es una adaptaci√≥n de la palabra “embed” en ingl√©s, que se ya utiliza generalizadamente en textos en espa√Īol.

  4. raul dice:

    Pues no ser√° el mismo pero embed en espa√Īol significa incrustar :\

  5. Vickolo dice:

    Me funciona perfecto para explorer, pero no funciona en safari, ni chrome ni firefox, estoy haciendo algo mal??

  6. Morton dice:

    Hola, Vickolo

    ¬ŅLo has probado en las versiones correspondientes? Recuerda que s√≥lo funciona en Firefox 3.5, Safari 3.1, y Opera 10.

    Saludos!

  7. Gerardo dice:

    Gracias por este resumen, hace bastante tiempo que busco como insertar fuentes en la web y no habia encontrado un articulo completo al respecto.
    Saludos

  8. Sergestux dice:

    Gracias por el dato, me qeudo muy clara tu explicacion. Para los que preguntan sobre que en firefox se ve y en IE no o Viceversa en la pagina viene un ejemplo de como hacer en estos casos: http://code.google.com/p/ttf2eot/wiki/Demo

    @font-face {
    font-family: “testing”;
    src: url(“output.ttf”) format(“truetype”);
    }

    @font-face {
    font-family: “testing”;
    src: url(“output.eot”);
    }

    Hello, Multiple Browser World!

  9. Carlos Sanchez dice:

    PARA EMBEBER FUENTES LO MEJOR ES ESTA P√ĀGINA http://www.fontsquirrel.com/fontface/generator
    Uno sube la fuente que quiere embeber en la pagina y el genera automaticamente los estilos, los tipos de fuentes y el codigo necesario para que se ve bien en todos los browsers

  10. Wilser Ventura dice:

    Gracias por el art√≠culo, est√° muy buena la informaci√≥n que has suministrado, me ser√° muy util. Un saludo desde Rep√ļblica Dominicana.

  11. Tagles dice:

    Gracias por el art√≠culo… En este caso uno no sabe para quien trabaja.
    De todo cuanto he leído, tengo que agradecer a Carlos Sanchez por un comentario tan acertado.
    Gracias otra vez

  12. alfredo dice:

    estimados
    tengo una ilustración, creada en ilustrato y guardada como svg, el tema es que esta ilustracción contiene textos(los cuales no quiero volver trazado) para mi es importante que estos textos también sean embebidos en google.

    el problema:
    al subir a internet la ilustración el texto cambia de font y se vuelve times new roman o algo así.. alguien sabe como puedo embeber la font en un archivo SVG

    saludos Cordiales
    Alfredo Pacheco
    desde chile

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder