Forums

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.

AndyHowells

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.

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.

dida

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

chrisburton

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

dida

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

chrisburton

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

dida

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

chrisburton

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

Paulie_D

If it doesn't...I can make sure it will.

:)

dida

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

ntry

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

orbolanos

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

treehouse : what would you like to learn today?

Forums

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