Forums

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;
[img]http://i.imgur.com/AGKcM.png [/img]

Here is a screenshot of latest FF build;
[img]http://i.imgur.com/ktsVD.png [/img]

*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

<img src="IMAGE URL" />

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!

chrisburton

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

daygore

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!

abradt

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!

ollyb

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.

chrisburton

@ollyb Post a link if possible.

ollyb

Well it manifests in my crappy blog that I'm redesigning at 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.

jurotek

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

chrisburton

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.

ollyb

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:

`<div class="crete"><h2>This header was rendered with font weight 700</h2></div>`
.crete{font-weight: 400}

Whereas this actually works:

`<div class="crete"><h2>This header was rendered with font weight 400</h2></div>`
h2{font-weight: 400}

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

ben_boomer

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

chrisburton

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

London804

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

iknowdavehouse

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

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

justcallmepras

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

PeterMK

Is there a proper solution for this? Still exists with an icomoon self made font, made from svg-s.

Example Win | FF (21) on IOS https://www.dropbox.com/s/fg9z2j5sw4ai3au/fonts-error.png

treehouse : what would you like to learn today?

Forums

[Solved] Typekit fonts much bolder in Firefox