Get help. Give help. A Web Design and Development Community.

[Solved] Typekit fonts much bolder in Firefox

  • # June 15, 2013 at 11:17 am

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

    Win | FF (21) on IOS

    # February 20, 2014 at 4:04 am

    I had the same problem… it seems that 900 is too bold for FF. I reduced this down to 700 and defined this in my font-face rules.

        src:url("Fonts/HelveticaNeueW01?#iefix") format("eot"),
        url("Fonts/HelveticaNeueW01.ttf") format("truetype"),
        url("Fonts/HelveticaNeueW01.woff") format("woff"),
        url("Fonts/HelveticaNeueW01.svg") format("svg");
        font-style: normal;
        font-weight: 700;

    I hope this helps

    # April 14, 2014 at 2:27 am

    This is likely an issue with antialiasing on OSX, and FF allows you to control it via css just for OSX to fix it (similar to the -webkit-font-smoothing property), see this bug for details.

    Long story short, add this to your styles and you’ll be set:
    -moz-osx-font-smoothing: grayscale;

    # July 30, 2014 at 11:03 am

    Thanks, @seaneking… your solution works perfectly!

    # June 4, 2015 at 10:09 am

    you legend @seaneking! … gave me an almighty headache this one… but now all is good! :)

    # June 10, 2015 at 4:07 am

    @seaneking you absolute legend! :D

    # August 30, 2016 at 1:58 pm

    Experienced the same thing in Win7 using FireFox 48.0. FireFox was smudging out my headings by making them overly-bolded. Top of the cascade was a reset and then added to the universal sheet the following:

    h1, h2, h3, h4, h5, h6 {

    Totally solved the problem.

Viewing 7 posts - 31 through 37 (of 37 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.