Grow your CSS skills. Land your dream job.

[Solved] Typekit fonts much bolder in Firefox

  • # July 11, 2012 at 9:35 pm

    Has anyone else experienced this? The fonts render great in webkit browsers, not so much in Firefox. It’s almost like an extra bold class is being applied site-wide. Is there fix/hack? Thanks!

    # July 11, 2012 at 11:27 pm

    For the most part I would actually argue that Firefox displays fonts correctly!

    If you’re using @font-face, make sure to set the font-weight to normal. Other than that, browsers simply render fonts differently.

    # July 12, 2012 at 8:15 am

    Well, it looks like the issue is Mac only. The font renders fine, if not better, on a pc with latest builds of both browsers. I’m going to attach an image of the same text in each browser on Mac for comparison. As I mentioned earlier I’m using Typekit to serve the fonts to the site and assigning them via my css. Thanks!

    You can really notice the difference in the heading “Testing!”.

    Here is a screenshot of latest Chrome build;
    AGKcM.png

    Here is a screenshot of latest FF build;
    ktsVD.png

    *Edit: Sorry, I didn’t see any place to upload images and I couldn’t get the img tags to work.

    # July 12, 2012 at 8:42 am

    @jeremiahadkins Try

    -webkit-font-smoothing: antialiased;

    To display images on the forums, you simply write HTML

    # July 12, 2012 at 10:05 am

    Thanks, In the “How to ask a Good Question” post referenced on the sidebar it instructs you to use a [img]shortcode. I have font-smoothing enabled via webkit browsers, this however is a -moz problem. The font renders correctly in Chrome/Safari, it’s Firefox that is adding the false boldness.

    # July 12, 2012 at 10:49 am

    @jeremiahadkins Oops my fault. I must have misread that. Where you’re declaring the font, try a font weight of 400 or 600.

    # July 12, 2012 at 10:57 am

    I’ve got several weights used throughout the website. The problem is that Firefox renders the font noticeably bolder at any weight. Even at lighter weights anyone can see that Firefox is adding some level of boldness. I’m just trying to figure out why it’s a Mac/Firefox only problem. I’m also trying to figure out if I am the only one experiencing this?

    # July 12, 2012 at 11:04 am

    @jereniahadkins You’re not and you should only be declaring one font-weight for that specific font.

    # July 12, 2012 at 11:22 am

    I specify several font weights in my Typekit Kit. I then set some elements such as headers to font-weight: 900 and other elements such as body text to font-weight: 600. The problem is no matter what the font-weight is set to, Firefox renders it bolder than it should be. I just can’t seem to find a solution! ;/

    # July 12, 2012 at 11:26 am

    @ jeremiahadkins Wait. Are you declaring different font weights to different weights of the actual font-family (light, medium, bold) or to one single font?

    Honest, I don’t believe there is one. Fonts render differently in some browsers as they use different rendering engines.

    # July 12, 2012 at 11:37 am

    Different font weights to different weights of the actual font-family. Example; font-weight:900 corresponds with Proxima Nova Extra Bold etc… I’m starting to think there isn’t a fix either ;/

    # July 12, 2012 at 11:52 am

    @jeremiahadkins Okay, you’re doing it correctly. Sorry there isn’t a fix. I would try slightly changing the font size.

    # July 12, 2012 at 1:50 pm

    If you are loading up a bold font, you shouldn’t be setting the font weight to bold as well. You should be setting it to ‘normal’ (because the font itself is already bold!).

    # July 12, 2012 at 3:47 pm

    I’m not, don’t worry! This is simply a rendering problem with Firefox and only on Mac OSX. I can’t for the life of me figure this thing out.

    # July 12, 2012 at 4:04 pm

    If you have a link I can check it out, otherwise we’re just guessing!

Viewing 15 posts - 1 through 15 (of 34 total)

You must be logged in to reply to this topic.

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