[Solved] Typekit fonts much bolder in Firefox

[jeremiahadkins]

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!

[TheDoc]

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.

[jeremiahadkins]

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;

Here is a screenshot of latest FF build;

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

[chrisburton]

@jeremiahadkins Try

-webkit-font-smoothing: antialiased;

To display images on the forums, you simply write HTML

[jeremiahadkins]

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.

[chrisburton]

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

[jeremiahadkins]

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?

[chrisburton]

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

[jeremiahadkins]

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! ;/

[chrisburton]

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

[jeremiahadkins]

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 ;/

[chrisburton]

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

[TheDoc]

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!).

[jeremiahadkins]

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.

[TheDoc]

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

[Author]

Posts