[Solved] Typekit fonts much bolder in Firefox

[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!

[Historical Forums User]

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

[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:

`

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!

[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

[Author]

Posts