Grow your CSS skills. Land your dream job.

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

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

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

        @font-face{
        font-family:"HelveticaNeueW01";
        src:url("Fonts/HelveticaNeueW01.eot?#iefix");
        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!

Viewing 4 posts - 31 through 34 (of 34 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".