Grow your CSS skills. Land your dream job.

[Solved] Typekit fonts much bolder in Firefox

  • # July 12, 2012 at 4:23 pm

    @jeremiahadkins @TheDoc It’s really unfortunate. Typekit will even tell you it’s due to the different rendering engines. It’s on their blog somewhere as well.

    # August 4, 2012 at 2:10 pm

    I had this problem using Bree Serif as a Webkit font in Firefox and the solution for me was not to size the font in Ems, but in pixels!

    # November 5, 2012 at 5:59 pm

    I am experiencing the same issue with my website using font quicksand font family. It appears firefox is rendering all fonts thicker than other browsers. If anyone knows how to resolve this I would love to know. Cheers!

    # November 10, 2012 at 9:52 am

    Ditto. Am experiencing this on FF Mac only.

    The font is a “normal”/400 weight font. However even if I set “font-weight: 400 !important” Firebug shows that Firefox is still rendering it as 700. Basically, Firefox is being a complete douche.

    # November 10, 2012 at 4:11 pm

    @ollyb Post a link if possible.

    # November 10, 2012 at 5:22 pm

    Well it manifests in my crappy blog that I’m redesigning at [www.opb.me.uk](http://www.opb.me.uk “”). I’m on Mac, and Safari and Chrome are fine, but Firefox has this font weight 700 problem.

    The h2 article headings are showing with font wieght 400, at size 2em – all good. Currently I have the site title as a h2 as well, with another 2em on top (so 4x basic height) and this seems to force the weight to 700, as shown in Firebug, without any way to change it.

    Thanks for having a look. I’ll put an edit at the bottom of this post if/when the site changes and the specifics here are no longer relevant.

    Edit: Fixed, see below.

    # November 10, 2012 at 5:44 pm

    This is what it looks like on WIN8 in IE10, FF and chrome in that order, don’t have opera or safari on my machine

    [Your text to link here…](http://media-cache-ec5.pinterest.com/upload/84864774199657865_vPs1w3gW.jpg “test”)

    # November 10, 2012 at 5:52 pm

    Why not just set it to `font-weight: 400;` instead of normal? It’s not a major difference and fonts will not render the same cross-platform/cross-browser.

    # November 12, 2012 at 10:19 am

    I had tried `font-weight: 400` already, it didn’t work, so `normal` was just the last thing I’d tried.

    Anyway, I’ve fixed it now. `font-weight` was being applied to a parent div:

    `

    This header was rendered with font weight 700

    `
    .crete{font-weight: 400}

    Whereas this actually works:

    `

    This header was rendered with font weight 400

    `
    h2{font-weight: 400}

    Might help someone. Or maybe it was just me being rubbish!

    # November 12, 2012 at 4:47 pm

    Within Typekit’s ‘Help’ section:

    Q: Fonts aren’t displaying or look “doubled” in Safari & Mobile Safari

    A: The font weight or style in the CSS isn’t available in the kit. If the specified font weight or style isn’t included in your kit, these browsers may try to create it. Make sure that the weight and style you want to apply are included in your kit and that they are specified correctly in the CSS.

    I know it’s not the correct browser issue… but sometimes they just render differently– even if you don’t declare a weight in your CSS

    # November 12, 2012 at 6:52 pm

    From my experience, `font-weight: normal` really only needs to be applied when you’re embedding them via @font-face. Then you apply the actual weight value to the element (or class/ID).

    # February 27, 2013 at 11:26 pm

    @ollyb thanks so much for contributing to this thread. I had a similar problem and applying the “font-weight: normal” to the element that I wanted to adjust fixed the problem. So now all browsers look very similar.

    # February 28, 2013 at 4:46 am

    I’m working on a project currently using 3 weights of the same font – Heavy, Medium & Roman. I had the same issue but a global “*{font-weight: normal;} ” fixed it on firefox and now all browsers render the fonts exactly the same way. I don’t like adding any weight to fonts that are already weighted.

    However you’ll have an issue with fallback fonts as bold / strong will still be “normal”. However using this https://developers.google.com/webfonts/docs/webfont_loader will sort that out.

    lis
    # April 4, 2013 at 11:35 pm

    thanks very much for this! I just ran into the same problem myself and “font-weight: normal” worked great.

    # May 1, 2013 at 4:27 pm

    Has any one tried this?
    @-moz-document url-prefix() {
    body {
    font-weight: lighter!important;
    }
    }

Viewing 15 posts - 16 through 30 (of 34 total)

You must be logged in to reply to this topic.

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