Font-weight rendering in Chrome using Adobe Typekit and Javascript

[christill]

I am building a wordpress theme and I’m using Adobe typekit for the fonts. It works perfect in all browsers except chrome.

In chrome the font is slightly heavier (more bold/weight) until i reach a certain point when scrolling the page then it goes to the intended font weight.

Another thing is that I am using swipe.js for a image carousel and when the animate is happening the font goes to the thinner weight again.

I really cannot think what this is. All i can assume is that it is some conflict with javascript. Ive moved my link to typekit js file to the bottom and top. It doesnt make a difference. If i remove the carousel it still happens.

This only happens in chrome and safari though so i’m assuming it’s webkit.

[TheDoc]

Chrome has some particularly crappy font rendering. Try adding:

-webkit-font-smoothing: antialiased;

Funny, though, I thought Typekit made that unnecessary.

[christill]

I’m don’t think the problem is typekit. I’ve removed the typekit javascript link and still does it. No idea why. Driving me insane.

[chrisburton]

Can we see a link?

[christill]

[http://www.happypeoplecorp.co.uk/](http://www.happypeoplecorp.co.uk/ “http://www.happypeoplecorp.co.uk/”)

[chrisburton]

@christill I’m not seeing the issue at all. This could be caused by not setting `font-weight: normal;` or specifying the correct weight such as `font-weight: 300;`.

Could show us a screenshot of the before and after?

[christill]

hmm. on the home page if you scroll down to the body copy in the blog section. when the carousel with logo’s animates the weight will change.

Also on the keep in touch page the heading weight changes.

[chrisburton]

@christill Sorry but I’m just not seeing it on Chrome (Windows). You might want to try adjusting your stylesheets and script files. Your stylesheets should be before your Javascript/jQuery scripts.

[christill]

not sure. I can see it on chrome OSX. What do you think of the website by the way?

[helen_sargan]

Did you ever find an answer to this problem? I’m seeing a similar issue only in linux and chrome with typekit font. The area it’s happening in is very width sensitive and the extra width of characters in linux is enough to break the presentation.

[chrisburton]

@helen_sargan Do you have a link?

[helen_sargan]

Yes – try http://www.ucs.cam.ac.uk – make the window narrower past the 900px breakpoint and keep going. In Chrome on Linux the words start to break whereas on other browsers they are fine (except one case on Chrome on Windows). If I drop the weight from 600 to 500 it’s also fine. I can adjust the styling to accommodate the problem but I’d prefer to know whether there’s a solution (already added a solution for IE to solve the fact there are more than 4 variations of the typekit font in use). BTW the styling is not mine, so you can be very rude about how complex it is!

[Author]

Posts