Guía: @font-face y creación de los .eot para IE

[kseso?]

Hola a todas/dos:

Me he permitido hacer una pequeña guía (tutorial) de cómo utilizar la regla @font-face y cómo crear los archivos .eot necesarios para la familia de ie.

Si encuentras algo que pueda/deba ser corregido coméntamelo, por favor. Así la iremos puliendo.

Me dio por llamarla @font-face: usando fuentes bonitas aunque también podríamos corear "abajo la tiranía de las fuentes seguras"

Espero que la encuentres útil.

Un saludo

[pao01]

Felicitaciones y muchas Gracias Kseso?

[jomaruro]

Hola:

Cuando los maestros se ponen a investigar y jugar salen cosas como esta. ¡Muchas gracias Kseso?!



Saludos.

[JavierB]

Bonito tutorial kseso?

Podrías ponerlo en las FAQs para tenerlo a mano.

Saludos,

[Mikmoro]

Iniciado por JavierB

Bonito tutorial kseso?

Podrías ponerlo en las FAQs para tenerlo a mano.

Saludos,

Exacto, porque en algún momento hará falta y merecerá la pena tenerlo localizado.

Otra vez, enhorabuena y gracias por compartir.

[kseso?]

Pues si dos capos de la materia coinciden, posiblemente uno de los dos tenga razón (al menos)
Incluyo una reseña en las faq's, entonces.

Gracias a todos: Mik, Javier, Jomaruro y Pao por vuestras palabras.

Un saludo

[deirdre]

Genial kseso?.

Muchas gracias.

Una preguntita: el efecto que se consigue con text-shadow ¿no se puede aplicar a las fuentes eot?... ¿es así?.

Es una lástima porque los titulares con el efecto sombreado son estupendos.

Gracias, de nuevo.

Bye

[kseso?]

Hola Deirde
De nada.

El text-shadow no tiene que ver con los eot's, sino que ie no soporta esa propiedad (ahora no recuerdo si el 8 también).

Un saludo

[deirdre]

Gracias, saludos

Bye

[kseso?]

Ampliando recursos relacionados con @font-face:
http://www.fontsquirrel.com
Página donde además de su selección de fuentes, también disponen de "@font-face Kits":

Click on "Get Kit" for any font to download a complete @font-face kit, including a sample stylesheet for that font. Each kit also includes EOT files for each font in the family for compatibility with Internet Explorer. Please note that the IE CSS declarations do not have Bold, Italic, or Bold Italic variants because they are not supported. These EOT files can only display one font from the family.

Sólo para quien no disfrute de hacérselo por sí mismo

[caricatos]

Hola.

Ya que solo te arrojan flores, voy a arrojarte un "balde de agua fría..."...

Se trata de lo que veo en mi máquina:

firefox portable (el que uso habitualmente) con este enlace: Font-face Demo for the Florante at Laura Font, no se vé... con opera usb, y chrome tampoco... eso sí, se distinguen en opera unite (10), safari, chrome y explorer...

Lo cierto es que, tal como contestásteme en otro mensaje, no es del todo fiable...

Saludos

[Mikmoro]

Buenas, caricatos.
Supongo que estarás al tanto de que, al margen de que seguramente tendrás razón, a través de algunas consultas, en el foro de CSS se han detectado otros muchos problemas de dibujado del Firefox portable. Y es que ha debido salir un poco malo o así.
Un comentario por si no estabas al tanto, que a veces algo así te puede volver loco.

[kseso?]

Hola Caricatos.

Créeme si te digo que siento si en mi otra respuesta has percibido cualquier "tono" subyacente. No era mi intención.
Tampoco lo era sonar ni categórico ni transmitir que sea un método infalible y seguro 100 en todas y cada una de las situaciones. Por eso terminaba diciendo que cada método (@font-face y el de sustitución) tiene sus "peligros".

Sobre la página que enlazas de fontsquirrel, me es totalmente ajena y símplemente la he incluido como un recurso más relacionado con el tema.

Y sobre tu "balde de agua fría...", además de que se agradece, no lo veo como tal. Es un dato valioso a tener en cuenta y que evitará más de una "comedura de coco" en más de una ocasión.
Al fin y al cabo, cuando se comparte algo es con la secreta esperanza de que el resto de usuarios lo complemente y mejore, a parte de que le sea útil a alguien.

Una vez más, Pepe, mis disculpas si transmití lo que no quise.

Un saludo.

P.D.: esperando tus próximos "baldes" para mejorar

[caricatos]

Iniciado por Mikmoro

Buenas, caricatos.
Supongo que estarás al tanto de que, al margen de que seguramente tendrás razón, a través de algunas consultas, en el foro de CSS se han detectado otros muchos problemas de dibujado del Firefox portable. Y es que ha debido salir un poco malo o así.
Un comentario por si no estabas al tanto, que a veces algo así te puede volver loco.

Evidentemente todos los navegadores pueden tener problemas de implementación... pero cada uno tiene sus preferencias, y elige el que le parece mejor... y la solución del software portable es la que he decidido adoptar, evidentemente con sus consecuencias... fíjate que hace pocos días compre un disco duro nuevo para mi portátil, y usando la mayoría de mis aplicaciones de ese modo, en pocas horas tuve mi sistema funcionando perfectamente... cuentas de correos, páginas de logueo, etc.

Iniciado por kseso?

...si en mi otra respuesta has percibido cualquier "tono" subyacente. No era mi intención.
Tampoco lo era sonar ni categórico ni transmitir que sea un método infalible y seguro 100 en todas y cada una de las situaciones. Por eso terminaba diciendo que cada método (@font-face y el de sustitución) tiene sus "peligros".
...
P.D.: esperando tus próximos "baldes" para mejorar

¡Je, je!

Uso el sistema font-face desde mi primera página, que quería que sea totalmente personalizada, con musiquita de fondo (aunque hoy se critique mucho), y los tipos que yo quisiera. Y ya funcionaban las fuentes eot, por supuesto, para el explorer, que era el que usábamos todos.

No percibí ningún tono especial, pero simplemente al ver que no funciona el sistema en todos los navegadores, creí oportuno hacer el comentario... y lo del balde de agua fría... me acuerdo de los carnavales de mi infancia, y en muchas ocasiones, el acto "literal" es estupendo (incluso recibirlo), pero no vayas a hacerme mucho caso con estas cosas "literales"...

Por cierto, seguro que ya te lo comenté, pero "Buen Trabajo"

Saludetes

[deirdre]

Hola...

Un pequeño comentario abundando en lo que dice Mikmoro. Sería bueno precisar que en ff 2 no se dibujan las fuentes tanto si es 'real' como si es 'virtual' (portable). Tampoco la versión portable de ff 3.0.11 dibuja las fuentes del sitio nombrado. Pero en la version 3.5.2 virtual (portable) de Firefox sí se dibujan perfectamente.

Como Caricatos no ha específicado (creo yo) la versión de ff portable que utiliza, quería precisar que las versiones anteriores a la 3.5, tanto de instalación como portables, al menos a mi, no dibuja las fuentes.

Bye

[Mikmoro]

Iniciado por deirdre

Pero en la version 3.5.2 virtual (portable) de Firefox sí se dibujan perfectamente.

Ah, correcto, me refería a versiones del portable anteriores (tipo 2.0), y por eso decía que debió salir medio malo. Por descontado, era de suponer que en posteriores versiones arreglarían todo lo posible, y si así ha sido, sirva este mensaje para los que gustan de usar portables de FF: "señores, actualicen sus portables, que han corregido muchas cosillas".

A eso iba, caricatos, por supuesto respetando el gusto y preferencias de cada uno, claro.

[caricatos]

Iniciado por Mikmoro

..."señores, actualicen sus portables, que han corregido muchas cosillas".

A eso iba, caricatos, por supuesto respetando el gusto y preferencias de cada uno, claro.

Acabo de actualizarlo , te aseguro que procuro siempre estar actualizado, pero siempre que iba a actualizarlo, no existía la versión en español, y decidía esperar... incluso hoy, al hacerlo, no lo hice en nuestro idioma, y tuve que arreglarlo con una chapuza (copiando una carpeta de la versión española, descomprimiéndola antes en otro sitio de mi máquina...)

Bueno, en resúmen, sigue sin funcionar en versiones viejas de FF portable, y en chrome... etc.

Saludos

[deirdre]

Bueno, es que en versiones viejas de ff (la 2 y la 3) no funciona aunque no sea portable (que sea de instalación normal).

[kseso?]

Aquí un listado (algo desactualizado) de navegadores y declaraciones/selectores que soportan:
http://www.quirksmode.org/css/contents.html
Hay otra página que lo que hace es avaluar lo que el navegador con el que le entras soporta. A ver si la reencuentro.

Un saludo

P.D.: Pepe, mientras el balde fuese agua y no seguido de harina, plumas u objetos similares (también vivencias de antaño, muy antaño

[deirdre]

Para Caricatos, por si es de su interés:

En esta página se suelen encontrar ff portables muy actualizados (incluso en español):

http://portableapps.com/apps/interne...e/localization

Ahora tienen la versión 3.5.3 (también en español de España).

Bye

[Mikmoro]

Derecho a marcadores

[caricatos]

Iniciado por deirdre

Para Caricatos, por si es de su interés:

En esta página se suelen encontrar ff portables muy actualizados (incluso en español):

http://portableapps.com/apps/interne...e/localization

Ahora tienen la versión 3.5.3 (también en español de España).

Bye

Hola:

Te lo agradezco deirdre, pero si la instalación es nueva, lo normal es perder toda la configuración del programa (marcadores, preferencias, claves, complementos...), por esa razón, uso la opción de "Buscar actualizaciones...".

Saludos

[deirdre]

Caricatos, en tu caso, utilizando el portable firefox ¿no es posible utilizar 'Buscar actualizaciones' del propio firefox?

Recuerdo que firefox 2, al actualizar al 3 pedía una nueva instalación, pero ahora no recuerdo si dentro de la versión 3 (hasta la actual 3.5.3) se puede siempre actualizar sin perder nada de la configuración propia, incluso utilizando un postable. Es una duda...

Bye

[caricatos]

Iniciado por deirdre

Caricatos, en tu caso, utilizando el portable firefox ¿no es posible utilizar 'Buscar actualizaciones' del propio firefox?

Recuerdo que firefox 2, al actualizar al 3 pedía una nueva instalación, pero ahora no recuerdo si dentro de la versión 3 (hasta la actual 3.5.3) se puede siempre actualizar sin perder nada de la configuración propia, incluso utilizando un postable. Es una duda...

Bye

Hola:

No sé desde que versión de ff portable se mantienen los datos, pero creo que ya con la 2 se mantenía los datos sin problemas...

El problema es que a veces algunos de los plugins o complementos no son compatibles con la nueva versión, y no se actualizan, como en el caso actual del idioma, pero siempre salen esas nuevas versiones de los complementos en poco tiempo.

Saludos

[deirdre]

Hola

La certeza que tengo es el ff 2 portable nunca actualiza a ff 3 (tampoco el de instalación en el sistema). Pero no entiendo porqué ff 3.0.11 portable sólo alzanza a actualizarse a ff 3.0.14 y para llegar a ff 3.5 sea necesario partir de instalación nueva, perdiéndose en el camino toda la configuración propia.

Debo aclarar que todos los portables que utilizo son de fabricación propia (con el programa ThinApp).

Bye

[kseso?]

¿Seguimos con el tema y ampliamos algo más al respecto?
Porque parece que esta propiedad (@font-face) está más actual que nunca y eso hace correr "ríos de tinta" en múltiples blogs y páginas.
Un complemento al código de su uso que ya he visto recomendado en varías páginas (por qué no se me ocurrió ) es indicar la ruta al disco duro del visitante por si ya tiene instalada nuestra fuente y ahorrarnos todo lo relacionado con su descarga (que veremos algo más adelante).
La línea a incluir sería:

@font-face {
font-family: 'saxmono';
src: local('saxmono'),
url('ruta/saxmono_1.ttf') format('truetype');
}

Nota que el final de la declaración a local es una "coma" (,) y no "punto y coma" (;)
Esa forma y disposición (precediendo la llamada a la local antes que a la de nuestro servidor y con la coma (,) me la he encontrado en distintos lugares.
También reseñable que cuando la llamada al .eot se realiza en la misma declaración que al ttf (o al .otf), la secuencia siempre es

Código css:

1º= declaración de la familia -->  font-family: 'saxmono';
2º= Llamada al .eot -->            src: url("saxmono.eot");
3º= llamada a la local -->         src: local('saxmono'),
4º= llamada al servidor -->        url('ruta/saxmono_1.ttf') format('truetype');
 

Por si hubiese dudas, la regla quedaría:

Código css:

@font-face {
  font-family: 'saxmono';
  src: url("saxmono.eot");
  src: local('saxmono'),
  src: url('ruta/saxmono_1.ttf') format("truetype");
}
 

Pero lo que realmente me ha animado a continuar el tema no es lo anterior, sino el artículo encontrado en
http://www.stevesouders.com/blog/200...d-performance/
y las advertencias y consejos que sobre @font-face hace y los enlaces que tiene a otros artículos de interés
* Paul Irish: Fighting the @font-face FOUT
* Stoyan Stefanov: Gzip your @font-face files
* Zoltan Hawryluk (again): More @font-face fun

Para desgracia mía, todos en inglés, así que no me atrevo a traducirte nada de ellos, y me abstengo de comentar nada de sus contenidos, de momento, pues necesitaré mi tiempo para asimilar un mínimo de tanta información.
No me atrevo a pedirlo, pero si me llevaría una alegría si alguien con conocimientos suficiente del inglés nos adelantase algo de todo ello .

Mientras, si estás interesado en el tema de las fuentes bonitas, ya tienes dónde seguir.

Un saludo

P.D.: llegué a ello a través de http://cssglobe.com/

[jomaruro]

Hola:

Iniciado por kseso?

No me atrevo a pedirlo, pero si me llevaría una alegría si alguien con conocimientos suficiente del inglés nos adelantase algo de todo ello .

+1

Saludos.

[Serezade81]

Hola lei tu tutorial de @font-face y lo utilize para incluir una fuente que yo como diseñadora gráfica habia utilizado para mi imagen corporativa. La movida es que ahora el unico navegador en que se ve la fuente bien (osea que la coge) es el opera 10 de mac, en ningun otro sitio me la coge. ni firefox, ni safari, y en explorer no he querido ni mirar, mi problema es que mañana por la mañana entrego la web que es un proyecto de final de master y la tengo que presentar y me gustaria dejarla en internet, pero como comprendo pues casi nadie usa opera y menos mac (en el mundo este de la web) entonces me da mucha rabia y la unica solución a posteriori de presentar mañana la web (que lo haré en opera) sera rasterizar todos los textos como imagenes png y ya esta. Yo tengo dw CS4 y el otro dia validado en la pagina de w3c el css me dijo que la version que tenia era 2.1, claro la regla que tu has expuesto en este tutorial (muy interesante) es para 3.0 y yo creo que esa es la movida porque no me lo coge ningun otro navegador excepto opera, y en mac, en pc hace lo que le da la real gana.
Bueno solo comentartelo para si hay alguna solución (que no sea rasterizar todo) para que yo pueda subir la web y mas o menos en casi todos los navegadores, claro imposible o utopia que sea en todos.
Gracias por tu sabiduria, espero que en breve pueda diseñar webs con fuentes que no sean las estandares (que para una diseñadora gráfica como yo SON HORRIBLES)

[mdk]

Hola, ante todo felicitar a kseso por este excelente tutorial. A continuación comentar, que al principio, con el contenido del tutorial, encontré el mismo problema con el que os estáis encontrando casi todos. No me iban las fuentes en varios navegadores. A parte, de la molestia de buscar y bajar los programas en cuestión. Pero, lo que me parece que no se dio cuenta nadie, y yo vi ya por casualidad, es que en el mismo tutorial, hay un enlace a la página http://www.fontsquirrel.com/ en el que si accedemos a la sección @font-face Generator tendremos un maravilloso generador de fuentes, en el que podremos subir la fuente que queramos, y marcando casi todas las opciones, nos dará para bajar un archivo comprimido que dispone del código fuente a insertar en nuestra página, así como 3 o 4 archivos con nuestra fuente codificada.
Lo probé, lo apliqué en mi web, y de momento, en todos los navegadores que lo he probado, me va perfectamente, incluso con IE8 que dicen en varias páginas que no es compatible.

Os invito a que lo probéis, y comentéis los resultado.

Un saludo y suerte! ^^

[Serezade81]

Iniciado por mdk

Hola, ante todo felicitar a kseso por este excelente tutorial. A continuación comentar, que al principio, con el contenido del tutorial, encontré el mismo problema con el que os estáis encontrando casi todos. No me iban las fuentes en varios navegadores. A parte, de la molestia de buscar y bajar los programas en cuestión. Pero, lo que me parece que no se dio cuenta nadie, y yo vi ya por casualidad, es que en el mismo tutorial, hay un enlace a la página http://www.fontsquirrel.com/ en el que si accedemos a la sección @font-face Generator tendremos un maravilloso generador de fuentes, en el que podremos subir la fuente que queramos, y marcando casi todas las opciones, nos dará para bajar un archivo comprimido que dispone del código fuente a insertar en nuestra página, así como 3 o 4 archivos con nuestra fuente codificada.
Lo probé, lo apliqué en mi web, y de momento, en todos los navegadores que lo he probado, me va perfectamente, incluso con IE8 que dicen en varias páginas que no es compatible.

Os invito a que lo probéis, y comentéis los resultado.

Un saludo y suerte! ^^

Jolin pos que suerte, yo no se que hecho tal vez sea cosa del sistema operativo, que en mac no funcione, no se pero yo cree mi archivo eot con la fuente que yo queria, pero nada es que era muy curioso incluso con la misma version de opera, la fuente subida en el hosting, intalada en local, no me funcionaba, solo se veia en mi portatil, no se cosa de expediente X, nada ya la presente en mi portatil, y bueno le he prometido a mi profe que buscaré la manera de arreglarlo. y al final he decidido que los textos largos los rasterizaré como imagen en illustrator y los botones y enlaces los hare en flash, porque de que me coja la fuente (jolin ni que fuera cirilico) dimiti.

Un saludo