Grow your CSS skills. Land your dream job.

@font-face appears bold and blurred in Firefox on Mac

  • # October 23, 2012 at 12:07 am

    They are correct. Webfonts will not look the same cross platform as they use different rendering engines. I think once Windows 8 rolls out (this Friday I believe) we will see an improvement with DirectWrite.

    # December 4, 2012 at 12:56 pm

    hi
    i have an problem with my font tahoma in firefox (mac) in the safari is not

    # December 4, 2012 at 1:38 pm

    How are you using it? We need more details than that. Screenshot? Link?

    # December 5, 2012 at 4:37 am

    i us
    @font-face{
    font-family:’tahoma';
    src:url(‘../font/tahoma.eot’);
    src:url(‘../font/tahoma.eot?#iefix’) format(‘embedded-opentype’),
    url(‘../font/tahoma.woff’) format(‘woff’),
    url(‘../font/tahoma.ttf’) format(‘truetype’),
    url(‘../font/tahoma.svg#tahoma’) format(‘svg’);
    font-weight:normal;font-style:normal;}

    body{font-family:Mitral,tahoma;font-size: 16px; }

    # December 5, 2012 at 8:18 am

    @dida Do you have a license to use Tahoma with @font-face? As far as I’m aware, you cannot. And just because it may be preinstalled on your computer does not allow you to do so. Always check the license information.

    Get it here:
    http://www.fonts.com/font/microsoft-corporation/tahoma/multilingual-regular/web-font

    Note: This does not include bold or italic sets. You have to purchase them separately.

    # December 5, 2012 at 9:58 am

    thank but i dont have the license of tahoma
    I think the problem is the compatibility with the system

    # December 5, 2012 at 10:35 am

    @dida Like I stated above, you cannot use Tahoma on your website with @font-face since it is against the EULA of the desktop version. Meaning, you are not allowed to take your desktop version of Tahoma and convert it into webfont files. You have to purchase the webfont version of Tahoma which gives you a valid license.

    If you’re having issues seeing the font on your machine, you can download the font for Windows. On Macs, people have posted issues with it being disabled which you can fix by a simple google search.

    Does that solve your issue?

    # December 5, 2012 at 10:42 am

    If it doesn’t…I can make sure it will.

    :)

    # December 7, 2012 at 5:06 am

    chrisburton thank you very much for your reply but I could not because by not buying the fonts
    thank you

    # April 17, 2013 at 9:04 am

    What was the solution? I still have this problem with an icon font.
    See: http://goo.gl/W9ecd

    Embeded like:

    @font-face {
    font-family: ‘keeebicons';
    src:url(‘fonts/keeebicons.eot’);
    src:url(‘fonts/keeebicons.eot#iefix’) format(‘embedded-opentype’),
    url(‘fonts/keeebicons.svg#keeebicons’) format(‘svg’),
    url(‘fonts/keeebicons.woff’) format(‘woff’),
    url(‘fonts/keeebicons.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }

    # May 14, 2013 at 9:49 am

    @ntry, where you able to solve this? I’m having the same issue. Fonts on firefox are being rendered bolder.

    # August 13, 2014 at 10:22 am

    Happy to report that Firefox has added vendor prefixed support for more standard looking fonts:

    -moz-osx-font-smoothing: grayscale;

    See the discussion around this new property on bugzilla.

Viewing 12 posts - 16 through 27 (of 27 total)

You must be logged in to reply to this topic.

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