1

I'm using a custom font on my site.

@font-face {
    font-family: 'ProximaNovaCondensed-Regular';
    src: url('/media/fonts/proximanovacond-regular-webfont.eot');
    src: url('/media/fonts/proximanovacond-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/media/fonts/proximanovacond-regular-webfont.woff') format('woff'),
    url('/media/fonts/proximanovacond-regular-webfont.ttf') format('truetype'),
    url('/media/fonts/proximanovacond-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

When applying a pulsating CSS3 animation to a text element, the font rendering method seems to change.

See this comparison image:

enter image description here

This was rendered in Safari.

I found this Q/A: Safari changing font weights when unrelated animations are running

According to what is said there, the rendering is done by the GPU once animations are applied. While in the Q/A in the link the issue is focussing on other elements than the affected one, in my case the actual element is affected.

The question is:

Can i somehow turn off or modify this behaviour, so that i get accurate (unified) font rendering qualities throughout my page, regardless of whether i use animations or not?

Community
  • 1
  • 1
SquareCat
  • 5,699
  • 9
  • 41
  • 75

1 Answers1

1

No perfect solutions but you could try adding -webkit-font-smoothing: antialiased; and see if that helps. It might give you a slightly thinner font, but it will at least be unified.

EDIT - Sorry , I just saw that the "antialiased" fix was posted in the Q/A you linked to.

Sometimes, adding -webkit-backface-visibility: hidden; to the affected elements helps, but I'm not really sure why though.

You can also try -webkit-transform: translate3d(0,0,0); which will force hardware acceleration and make the font, as the fix above, unified but slightly thinner ...

Hope that helps!

Christofer Vilander
  • 17,232
  • 6
  • 31
  • 26
  • 1
    That's it, have a look at http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/ for more details about subpixel rendering. – mddw Dec 28 '12 at 19:07
  • I think the solutions you mention are the only ones available to us at the moment. I have heard of none other than those either. The problem is that whether i apply a hidden backface-visibility or a translate3d(0,0,0) – in both cases the font rendering will be changing to what is shown in the first of my two images. So basically it seems that what is applied to the fonts while the animations are running, is then applied to them statically. – SquareCat Dec 30 '12 at 00:23