The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[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

Viewing 6 posts - 31 through 36 (of 36 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed