Chrome no muestra mi fuente

Chrome no muestra mi fuente

2 comentarios en Chrome no muestra mi fuente

Recientemente me he encontrado el problema de que Chrome no muestra mi fuente definida en CSS con fontface, depués de mucho buscar resulta ser un bug de la última actualización 33 y por lo visto se mantiene en la 34, el problema consiste en que la fuente no se visualiza o mejor dicho, Chrome no la renderiza hasta que se fuerza su pintado, bien porque haya algún cambio al pasar el puntero por encima (por ejemplo, en los enlaces), por tanto, para solucionarlo tenemos que forzar un repintado y para ello crearemos una animación con css3 que no será apreciable en absoluto pero que forzará a repintar y así renderizará las fuentes externas definidas en nuestra hoja de estilos.

body
{
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
    from{ opacity: 1; }
    to{ opacity: 1; }
}

Creamos una animación que llamaremos fontfix que cambia la opacidad de 1 a 1 con lo que visiblemente no hace nada pero soluciona nuestro problema.

La información se puede encontrar en la web del proyecto: https://code.google.com/p/chromium/issues/detail?id=336476&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

Sobre el autor

Ingeniero informático especializado en programación web, dedicado al diseño de páginas web, tiendas online, aplicaciones a medida. Trabajo con PHP, MySQL, Javascript, Jquery, Bootstrap, HTML, CSS, Prestashop y Wordpress.

Entradas relacionadas

2 comentarios

  1. Jason Tobon  - 19 marzo 2014 - 20:51
    /

    Excelente!! Por fin pude solucionarlo. Y entonces sucederá el problema de ahora en adelante?
    Muchas gracias.

  2. Moisés Varela  - 20 marzo 2014 - 0:23
    /

    Pues esperemos que lo solucionen pronto, aunque de momento van dos actualizaciones en las que no.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Sígueme en

Volver arriba