4

I'm using two special fonts on my website for headings and subtitles. They are working fine on a PC in IE, Firefox and Chrome. However, on a Mac in Safari and Chrome 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. I also have screenshots comparing the results in the different browsers for Mac and PC at: enter image description here

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

I have been working on this problem for a few days now and don't seem to be getting anywhere. I did get an improvement when I changed the font weight from normal to bold for the Helvetica Neue bold typeface. I also tried moving the SVG line to the top, but that doesn't help.

Strangely, in Chrome on a Mac, when one of the three main panels are hovered over (under the main header), the font becomes much clearer and it looks as it should. It doesn't make any difference though, on Safari.

I would be grateful if anyone could offer any advice.

Barnee
  • 3,212
  • 8
  • 41
  • 53
Ben
  • 897
  • 2
  • 16
  • 34

4 Answers4

11

All browsers render fonts in a different way. Try -webkit-font-smoothing: antialiased; for Safari and see if it makes a difference. Also, try using relative length units.

Kwon
  • 400
  • 3
  • 12
  • Hi Kwon, thank you very much for your reply. The code worked for Safari. Unfortunately Chrome didn't change. I will carry on looking to see if I can find a fix for Chrome. Thanks again. – Ben Aug 02 '12 at 15:48
  • Hi Kwon, I was wrong, it did work in Chrome. However it is not working in Firefox on the Mac. Have you any suggestions for this? – Ben Aug 03 '12 at 07:41
  • First off, make sure you're using a reset stylesheet if you aren't already. Then, try setting the `font-weight` specifically (to whatever you have it set as). If the hack doesn't resolve, don't stress it too much. Firefox Mac users are less than 3% I believe and you want to design for the majority. – Kwon Aug 03 '12 at 17:32
0

As Kwon said, ever browser/OS has different font rendering. It even depends on what your display settings at the OS level is set to (sub-pixel aliasing).

Even more frustrating, webkit/chrome has some font-face rendering bugs as well, such as any text with text-shadow: http://code.google.com/p/chromium/issues/detail?id=23440

kmiyashiro
  • 2,249
  • 14
  • 15
  • Hi kmiyashiro, thanks for your response. It does seem like custom fonts is a bit of a minefield, and is not really straightforward. – Ben Aug 02 '12 at 15:51
0

Try if fonts blurred in chrome.

body {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}

or

a,p,span,h1,h2,h3,h4,h5 {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}
Sinju Angajan
  • 833
  • 2
  • 10
  • 20
0

A blur effect could appear too when HTML container has an inconsistent size compared to its HTML content markup. To resolve it, try to fix the size of head container, and be sure it is bigger than child.

DevMultiTech
  • 353
  • 3
  • 15