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

[bmango]

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.

[chrisburton]

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

[bmango]

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

[chrisburton]

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

}

[bmango]

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

[johan77]

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.

[joshuanhibbert]

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.

[chrisburton]

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

[ramkumarramaraj]

Hi,

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

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

[joshuanhibbert]

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

[chrisburton]

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

[jan_patak]

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/

[chrisburton]

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

[johan77]

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

[chrisburton]

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.

[Author]

Posts