Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Typekit fonts much bolder in Firefox

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 43 total)
1 2 3
  • Author
    Posts
  • July 11, 2012 at 9:35 pm #38877
    jeremiahadkins
    Member

    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 #105915
    TheDoc
    Member

    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 #105932
    jeremiahadkins
    Member

    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 #105937
    chrisburton
    Participant

    @jeremiahadkins Try 

    -webkit-font-smoothing: antialiased;

    To display images on the forums, you simply write HTML

    July 12, 2012 at 10:05 am #105941
    jeremiahadkins
    Member

    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 #105945
    chrisburton
    Participant

    @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 #105947
    jeremiahadkins
    Member

    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 #105948
    chrisburton
    Participant

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

    July 12, 2012 at 11:22 am #105949
    jeremiahadkins
    Member

    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 #105950
    chrisburton
    Participant

    @ 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 #105951
    jeremiahadkins
    Member

    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 #105952
    chrisburton
    Participant

    @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 #105962
    TheDoc
    Member

    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 #105972
    jeremiahadkins
    Member

    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 #105978
    TheDoc
    Member

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

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 43 total)
1 2 3
  • The forum ‘CSS’ is closed to new topics and replies.