Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #39186
    bmango
    Member

    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.

    #107273
    chrisburton
    Participant

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

    #107292
    bmango
    Member

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

    #107293
    chrisburton
    Participant

    @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;
    }
    #107380
    bmango
    Member

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

    #112270
    johan77
    Member

    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.

    #112251

    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.

    #112252
    chrisburton
    Participant

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

    #112260

    Hi,

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

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

    #112259

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

    #112281
    chrisburton
    Participant

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

    #112336
    jan_patak
    Member

    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/

    #112337
    chrisburton
    Participant

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

    #112445
    johan77
    Member

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

    #112447
    chrisburton
    Participant

    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.

Viewing 15 posts - 1 through 15 (of 26 total)
  • The forum ‘CSS’ is closed to new topics and replies.