Grow your CSS skills. Land your dream job.

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

  • # August 3, 2012 at 3:56 am

    I’m using two special fonts on my website for headings and subtitles using @font-face. They are working fine on a PC in IE, Firefox and Chrome, and also in Safari and Chrome on a Mac. However, with Firefox on a Mac the fonts appear emboldened and slightly blurred. The particular fonts I am using are Utopia and Helvetica Neue Condensed Bold. I have generated the font kits using font squirrel based on otf files. I am using the CSS generated by font squirrel. You can see the website at http://shapecast.benmango.co.uk.

    The code I’m using for the CSS is:

        @font-face {
    font-family: 'Utopia';
    src: url('/fonts/utopiastd-regular-webfont.eot');
    src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
    url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
    url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    }

    @font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
    }

    @font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
    url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-variant:normal;
    }

    At first the fonts were also appearing blurred and bold on the Mac in Safari and Chrome, but I managed to fix it by adding the following code to the body tag:

    -webkit-font-smoothing: antialiased;

    I’ve tried adding

    	-moz-font-smoothing: none;
    font-smoothing: antialiased;

    for Firefox, but it didn’t make any difference.

    I have been working on this problem for a few days now and don’t seem to be getting anywhere.

    I would be grateful if anyone could offer any advice.

    # August 3, 2012 at 1:53 pm

    @bmango Can you post a picture as I’m not on a Mac? There might be a fix using text-shadow.

    # August 4, 2012 at 3:05 am

    @ChristopherBurton I have put a picture of the difference up at http://shapecast.benmango.co.uk/FontBrowserComparison4.jpg.

    # August 4, 2012 at 9:21 am

    @bmango You’re missing some font formats in @font-face. Also, always set the font-weight to normal.

    It should look like this

        @font-face {
    font-family: 'Utopia';
    src: url('/fonts/utopiastd-regular-webfont.eot');
    src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
    url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
    url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
    src: url('/fonts/helveticaneueltstd-bdcn-fs.eot?#iefix') format('embedded-opentype'),
    url('/fonts/helveticaneueltstd-bdcn-fs.woff') format('woff'),
    url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
    url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    # August 6, 2012 at 11:39 am

    @ChristopherBurton Thanks very much for your response. I’ll try your suggestions and see how that goes. Unfortunately, I also don’t have a mac to test on so have to wait to hear back. I do know that when I changed the font weight from normal to bold it improved the font appearance on legacy Mac browsers (I guess that are using the .svg format), but I guess not many people will be using those versions.

    # October 18, 2012 at 11:55 pm

    Hi,

    Did anyone reach a solution to this? I’m experiencing the same problem, Using Trade Gothic Bold Condensed #20, served by fonts.com. As suggested above, the problem went away in Chrome/Safari by setting -webkit-font-smoothing: antialiased; and font-smoothing: antialiased;.

    The thing is, even on fonts.com this issue occurs, when “trying out” their web fonts on different browsers. I’m on a Mac 10.6.8 using Firefox 16.0.1. I have googled this issue for an eternity – but can’t find a solution.

    # October 19, 2012 at 12:04 am

    It sounds to me like it is to do with they way the fonts have been hinted for the web. I haven’t had this issue with fonts served from Typekit.

    # October 19, 2012 at 12:45 am

    @johan77 Please provide a screenshot of the font rendering or a live link and I can help determine the issue.

    @joshuanhibbert Even Typekit has issues.

    # October 19, 2012 at 1:34 am

    Hi,

    Your fonts are Built-in Fonts. So you can use important Property.

    **font-weight:normal !important;**

    # October 19, 2012 at 2:06 am

    @ChristopherBurton Probably, no one is perfect. But Typekit is one of the closest to being perfect.

    # October 19, 2012 at 6:38 am

    Yeah @joshuanhibbert is correct, I haven’t yet had any cross browser problems or glitches with Typekit fonts. I used to use FontSquirrel for everything but it just doesn’t cut the mustard, plus typekit has a sexy previewer so you can see what they look like in different browsers and type out stuff to see how it looks.

    # October 19, 2012 at 12:10 pm

    @joshuanhibbert Typekit is convenient with a very low priced, lease option product. They do a great job with optimizing their library but there are instances where they allowed really poor optimized webfonts into the library which I have already reported (Adelle Light – now updated). At one point Typekit brushed off a rendering issue I noticed with Proxima Nova. Thankfully I had a discussion with Mark Simonson and it’s going to be fixed.

    @andy_unleash Font Squirrel optimizes (manually) the fonts in their library just like Typekit. Although their library isn’t all that great.

    If you want to talk about quality, Webtype is superior.

    # October 21, 2012 at 7:44 am

    Hi,
    I have similar problem but with IE8 on WinXP.
    I am using Helvetica font converted by http://www.fontsquirrel.com/ and IE8 on WinXP the entire page is rendered in bold (see screenshot https://docs.google.com/open?id=0B9OjAuDRj29pazFENHc3aXBKZEU). I spent hours on the google but I didn’t find any working solution.
    Could anyone help me with this issue?
    Link to the site: http://www.webmakers.cz/_klient/bst/

    # October 21, 2012 at 8:54 am

    @jan_patak I do believe what you did was illegal. As far as I know, you can’t use Helvetica with @font-face embedding.

    # October 22, 2012 at 11:43 pm

    @ChristopherBurton, here are the screenshots:

    http://dl.dropbox.com/u/29760232/Chrome.png
    http://dl.dropbox.com/u/29760232/Firefox.png

    I spoke to fonts.com support, and got this answer: “The display you’re seeing is correct in each case. The CSS attribute you’re using is specific to webkit (Safari & Chrome) on OS X only (maybe Linux’s Chromium, I haven’t tested that, though). Even without the vendor prefix, “font-smoothing” is not used by Windows browsers or by any non-webkit browsers on OS X.”

    So, I guess what they are saying is that this is just how FF renders fonts. But the difference between screenshots is pretty significant.

Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.

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