Problema con fontface y Chrome

eXtreM3

Buenas, tengo una duda un poco chunga... Os pongo en situación: estoy desarrollando una web y hemos utilizado un tipo de fuente concreto, la Signika (light, semibold, bold, y regular). Para ello he utilizado el comando @fontface de css, hasta aquí todo perfecto, pilla la fuente bien y tal, como siempre.

Pero hay un problema, no renderiza bien la fuente con cualquier color en hexadecimal. Dejo una screen de un modulillo con texto de la home


Izquierda: Firefox - Derecha: Chrome

Fuente: SignikaLight, Color: (#4d4d4d); Como veis, hay bastante diferencia, en Chrome se visualiza un poquitio más gorda. El problema no viene dado tampoco por alguna superposición de estilos, ya que si pongo un negro puro (#000) o un negro más suavizado (#393939) se visualiza exactamente igual en los dos navegadores.

Dejo por aquí el enlace a la web. El texto que he puesto está en la home, debajo del slide. También ocurre lo mismo con el menú.

El problema tampoco es por colores compatibles con web, ya que según Photoshop, el (#666666) por ejemplo es un color compatible para web y da el mismo problema, el puto pixelcillo ese alrededor de la fuente. Funciona sólamente con algunos colores, no con toda la paleta... (estoy hablando SÓLO DE CHROME, en todos los demás navegadores - IE, firefox, safari, opera - funciona correctamente cualquier color)

Es una paranoya porque hasta ayer siempre que desarrollaba una web con una tipo personalizada, utilizábamos el .otf y aceptaba cualquier color, nunca he tenido ningún problema con esto. No sé si es debido a alguna actualización de Chrome o qué, pero me tiene bastante rallao.

Seríais tan amables de hacer una comparativa en vuestros navegadores? (firefox + chrome) Con el mismo módulo de Servicios de la home a ser posible, que es el único que se ve mal ahora mismo (a los demás les cambié el color a (#393939) y va bien)

Gracias, saludos!

GreyShock

#1 Si te fijas los títulos también se ven mal :O Se juntan las letras.

Maldito font-face, siempre se tiene que inventar algo. ¿Has probado a procesar los .otf con font-squirrel?

1 respuesta
eXtreM3

#2 a qué te refieres con procesar los otf?

1 respuesta
GreyShock

#3 En font-squirrel puedes subir tus fuentes para que te las optimice para @font-face, y te devuelve un paquete de fuentes y su respectivo código para que funcione bien en todas partes... teóricamente, a veces me ha fallado, pero suele funcionar de puta madre.

http://www.fontsquirrel.com/fontface/generator

1 respuesta
Merkury

#1 Te has dado cuenta que si reduces la ventana luego no puedes ver los enlaces del menu de arriba. Todo es por el tema del fixed del contenedor menú.

1 respuesta
eXtreM3

#4 Ah, sí bueno yo esa web ya la utilizo para convertir los .otf a .eot. Lo que pasa es que hay que usar el formato otf, el formato ttf es una puta mierda, sale super pixelado.

El problema no es por la fuente ni la extensión, es por la interpretación del navegador para algunos colores, la verdad es que no tiene sentido. Si a alguien más le ha pasao estaría bien que se pasase por aquí a comentar cómo lo arregló o qué hizo.

#5 puede ser, aún no está terminada la web ni mucho menos :P gracias igualmente.

EDIT -> actualizo:

Tiene que ser algo del Chrome, algún mini-update o algo que hayan hecho. Recuerdo varias webs que se visualizaban perfectamente con el fontface en otf y cualquier color, y ahora se ven más gorditas y/o pixeladas. Menudos sinsentido estos de google hijosdeputa xD

eXtreM3

SOLUCIONADO

Al final resulta que había que disponer también del archivo .svg para que la fuente se visualice bien en Chrome. No entiendo por qué, porque como bien digo en #6, antes no me ocurría. (Se visualizaba correctamente en dispositivos móviles y tablets, iOS y Android con la otf)

Ahora lo que hago es que para todos los navegadores utilizo el .otf y para Chrome (mediante css) utilizo el .svg, me ha solucionao bastante el problema, porque aunque no es EXACTAMENTE igual que la otf, al menos la renderiza muchísimo mejor que de la otra manera fea.

Putas paranoyas incomprensibles...

Usuarios habituales

  • eXtreM3
  • Merkury
  • GreyShock