Grow your CSS skills. Land your dream job.

Font-weight rendering in Chrome using Adobe Typekit and Javascript

  • # November 8, 2012 at 4:15 pm

    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.

    # November 8, 2012 at 4:17 pm

    Chrome has some particularly crappy font rendering. Try adding:

    -webkit-font-smoothing: antialiased;

    Funny, though, I thought Typekit made that unnecessary.

    # November 8, 2012 at 4:24 pm

    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.

    # November 8, 2012 at 4:49 pm

    Can we see a link?

    # November 8, 2012 at 5:13 pm

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

    # November 8, 2012 at 5:22 pm

    @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?

    # November 8, 2012 at 5:53 pm

    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.

    # November 8, 2012 at 9:04 pm

    @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.

    # November 9, 2012 at 5:31 am

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

    # April 5, 2013 at 12:36 pm

    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.

    # April 5, 2013 at 4:18 pm

    @helen_sargan Do you have a link?

    # April 8, 2013 at 4:57 am

    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!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".