@font-face pixelado en chrome

[kesioo]

Buenas a todos,
queria ver si me pueden dar una mano..
he utilizado el generador de @font-face que aparece en fontsquirrel.com y pude incrustar perfectamente la tipografia VAG en mis titulares..

El inconveniente es que ahora que lo veo en otra pc, usando chrome se ve enteramente pixelada (cuando en el chrome de mi pc se ve perfectamente)..

a que puede deberse? este es el css utilizado..

Código:

@font-face {
    font-family: 'VAGRoundRegular';
    src: url('vag_round-webfont.eot');
    src: url('vag_round-webfont.eot?#iefix') format('embedded-opentype'),
         url('vag_round-webfont.woff') format('woff'),
         url('vag_round-webfont.ttf') format('truetype'),
         url('vag_round-webfont.svg#VAGRoundRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1 { color: #F60; 
	font-family: 'VAGRoundRegular';  
	font-size: 14pt;
	text-transform: uppercase;
	line-height: 16pt; 
	margin: 0px 0px 25px 0px;
}

muchas gracias!

edito:
ahora que lo veo.. mas abajo en el texto del articulo, se usa la trebuchet (fuente de sistema) que tambien se ve pixelada.. En mi pc este no ocurre. Pero si en la de otras personas que ven los articulos. No entiendo a que se debe..

[cristian_cena]

que yo sepa, el pixelado de fuentes tiene que ver con el sistema operativo, no tenemos modo de solucionarlo me parece.

[kesioo]

ahh.. malisimo entonces, pero bueno, al menos tengo un motivo ahora para el problema por si alguien consulta..

[ArturoGallegos]

el problema es tanto sistema operativo como navegador... no todos los navegadores renderizan de la misma forma aun cuando es el mismo SO.

y como dijo el compañero @cristian_cena no se puede hacer nada por eso, esta fuera de nuestro control

[Gilford]

Depende del sistema operativo, aunque los navegadores también influyen pero en mucha menos medida.

Te voy a poner el ejemplo que tengo en mi firma. Con Mozilla, los titulares se ven perfectamente (en general, Mozilla es el que mejor saca las fuentes). En cambio, con Opera se ven igual pero un tanto pixeladas. Luego, si lo visualizas con Chrome, verés que se ve igual que en Opera pero un tanto más fino.

Esto puede variar, además, de la configuarción de tu ordenador. Mi hermano, por ejemplo, para optimizar su ordenador deshabilitó cualquier filtro para suavizar y redondear fuentes, y los titulares de la web se le ven horrible no, lo siguiente.

[kesioo]

me quedo mucho mas claro.. gracias a todos por responder!

[kesioo]

me surgio una duda.. como hacen en algunos sitios para que la carga de fuentes se vea perfecta.. no se si existe una forma de suavizar o directamente hacerlo de alguna otra manera..

un ejemplo es la pagina del machester city, en la que veo la helvetica usada a la perfeccion...

http://www.mcfc.co.uk/

se les ocurre alguna?

[kesioo]

bue.. termine de enviar y me doy cuenta que es un flash..

de todas maneras otra web es diegomattei.. ahi cambian automaticamente los titulares por otra tipografia, pero es convertida en imagen..

[ArturoGallegos]

las técnicas que mencionas son la de Sifr y cufon, son recomendables si solo usaras la fuente en unas cuantas palabras y/o títulos de tu sitio


sifr cambia el texto por flash y cufon tengo entendido que reemplaza texto por imagenes

[cristian_cena]

Agregar mi experiencia personal con el tema fuentes no web: probé sifr, cufon y typeface.
Si trabajas con diseños (diseñadores) exigentes no te recomiendo estas técnicas de reemplazo.
Porque hay tipografias que funcionan solo en ciertos puntos, y el suavizado que generan estas tecnicas rompen la tipografía.

Actualmente uso font-face con fontsquirrel, estoy convencido de que es la mejor alternativa y funciona para todos los browsers solo con css sin necesidad de scripts adicionales.
Google fonts seguro va a crecer pero de momento esta verde me parece, solo iría a google fonts para descargar el ttf que luego generaría con fontsquirrel.

Si querés calidad y efectos trabajá con flash cuac!. Por mas jquery y css3 que pongamos nunca vamos a llegar a la calidad de tipográfica/vectorial de flash, al menos por un buen tiempo. Aunque los resultados con font-face son de muuuy buena calidad.

Saludos

[kesioo]

ahh! sifr ya habia leido algo (y ahora seguia), pero mientras estaba leyendo un poco el codigo en diegomattei. Y ahora que lo nombras recuerdo haber leido en alguna parte del estilo de los titulares un "cufon"..

voy a investigar un poco mas sobre esa manera.. aunque a primera medida, siendo un reemplazo por imagen debe haber un problema con el seo al igual que con sifr..

por ahi lei que hay alguna manera para usarlos sin tocar las etiquetas h1.. como lo usan en http://www.sensei21.com

[ArturoGallegos]

Iniciado por cristian_cena

Actualmente uso font-face con fontsquirrel, estoy convencido de que es la mejor alternativa y funciona para todos los browsers solo con csssin necesidad de scripts adicionales.
Google fonts seguro va a crecer pero de momento esta verde me parece, solo iría a google fonts para descargar el ttf que luego generaría con fontsquirrel.

has visto el código fuente que te proporcionan estos dos proveedores?

es exactamente la misma tecnica, puede variar el orden en que colocan el codigo del css pero si eres observador tienen exactamente lo mismo, al igual que los mismos archivos que te generan para que coloques en tu sitio.

Iniciado por kesioo

ahh! sifr ya habia leido algo (y ahora seguia), pero mientras estaba leyendo un poco el codigo en diegomattei. Y ahora que lo nombras recuerdo haber leido en alguna parte del estilo de los titulares un "cufon"..

voy a investigar un poco mas sobre esa manera.. aunque a primera medida, siendo un reemplazo por imagen debe haber un problema con el seo al igual que con sifr..

por ahi lei que hay alguna manera para usarlos sin tocar las etiquetas h1.. como lo usan en http://www.sensei21.com

ciertamente influye en el tipo de carga pero en cuestión de seo el texto sigue siendo legible por los buscadores ya que no se elimina solo se oculta y se muestra una imagen o flash en su lugar, la carga semántica de estos elementos nos e pierde.

[cristian_cena]

@Agg, a google fonts solo le pude descargar ttf. ¿sabes si podes descargar un paquete con woff, svg, eot y ttf? al menos yo no lo encontré por eso me inclino por fontsquirrel. Además que con fontsquirrel puedes generar la que necesites.

Créeme que he renegado bastante con este tema en varios proyectos. Y en ningún caso volveré a utilizar tecnicas de reemplazo, simplemente porque ya son parte del pasado.

Saludos.

[kesioo]

yo hasta ahora venia utilizando el generador de fontsquirrel, pero fue alli adonde encontre el problema que dio origen a este post.
En mi pc se veia perfecto en todos (incluido opera), pero cuando levante la misma pagina en otra pc con chrome se veia la tipo dinamitada!

ahora estoy probando cufon, me gusta, pero no se si sirve para etiquetas en clases o identificadores, o etiquetas a nivel global unicamente..

[ArturoGallegos]

Iniciado por cristian_cena

@Agg, a google fonts solo le pude descargar ttf. ¿sabes si podes descargar un paquete con woff, svg, eot y ttf? al menos yo no lo encontré por eso me inclino por fontsquirrel. Además que con fontsquirrel puedes generar la que necesites.

Créeme que he renegado bastante con este tema en varios proyectos. Y en ningún caso volveré a utilizar tecnicas de reemplazo, simplemente porque ya son parte del pasado.

Saludos.

estoy viendo google fonts recuerdo haber bajado algunas fuentes de allí porque fontsquirrel andaba fallando mmm pero los que me descarga ahorita google veo que solo trae el ttf y si le pones uso rápido en la hoja de estilos que te dan viene el link al woff

creo que debo considerar las opciones que aya cambiado google fonts desde entonces y/o que acabo de decir un disparate al decir que eran iguales

y por supuesto las técnicas de reemplazo ya quedaron muy atrás pero creo que aun se pueden encontrar casos especiales donde utilizar esos métodos