Renderizar fuentes web fonts en Google Chrome

Desde hace mucho tiempo tengo pesadillas en la noche por lo mal que muestra el navegador Google Chrome las tipografías descargadas desde web (web fonts).

Renderiza mal incluso las que importas desde Google Fonts.

Por esto hoy me he llevado una gran alegría cuando he leído en el artículo de Sam Goddard la solución, ¡Y HA FUNCIONADO!

Al parecer a Chrome no le gusta mezclarse con otros formatos de letras, y hay que definir la llamada a la fuente SVG a parte

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

chrome_font_fix chrome_font_fix2

De este modo la tipografía se muestra fina fina!

Espero que este artículo os sea de tanta ayuda como me ha sido a mi.

18 comentarios

  1. George dice:

    Para que sirve “(-webkit-min-device-pixel-ratio:0)”?

  2. paul dice:

    Si , pero ahi se va a ver bien en tu pc, pero se sigue viendo mal en todas los exploradores de las personas que entran a tu web
    Es asi o me equivoco? estoy con el mismo problema me tiene harto

    saludos!!

    • Jaime Fernández dice:

      No, con esto harás que se vea bien en todos los PCs que te visiten con Chrome. Con el resto de navegadores ya se ve bien por defecto. Espero que esto solucione tus problemas.

  3. George Doe dice:

    Al menos para fuentes de iconos no sirve esta forma. Hablo de Font-Awesome.

  4. Eloy Ortega dice:

    Hola, a mi me funcionaba pero las negritas me desaparecían en Chrome.
    Gracias por compartirlo!!

  5. ML dice:

    Muchisimas gracias! Me has solucionado un problema que me estaba volviendo loco desde hace días!

  6. Omhy dice:

    ¿Se puede hacer lo mismo pero usando las fuentes de Google directamente de sus servidor?

    Por ejemplo cuando usamos así:

    gracias

  7. Homi dice:

    ¿Se puede hacer lo mismo pero con la fuente cargada desde los servidores de Google?

    Osea con esto:

  8. […] Voila! Big thanks to Jaime F. for his excellent answer on StackOverflow, find the original solution [in spanish] here in his blog article. […]

  9. Angie dice:

    Muchas gracias!!! Era lo que necesitaba, tenía un problema con el renderizado de los signos de puntuación. Me solucionaste un gran problema, siempre se aprende algo nuevo! a fav. Saludos 🙂

  10. Ivan dice:

    tengo problemas con la fuente century gothic en negrita, se ve horrible en crhome 🙁

  11. defharo dice:

    Funciona muy bien, gracias.

  12. Fernanda dice:

    Me encantaría saber porque no lo puedo hacer funcionar.. si subo todas las tipografias con esos formatos, en chrome se me rompen totalmente, se pixelan y se cortan y no se lee nada!! y haciendo esto no me soluciona.. 🙁 Si subo solamente la tipografia .otf se ve perfecto en los demas navegadores y en chrome un poco mejor se puede leer, pero aun sigue pixelando y tampoco se soluciona con esto.. ya no sè que hacer!!

  13. Oscar dice:

    Yo utilizo el Opera, firefox, safari, chrome y sigo con el mismo problema … las fuentes están alojadas en el servidor, sabes que pueda estar pasando?

    Gracias.

Escribe una comentario