1

I have spent last 2 days figuring out how to make font looks crispy on Chrome and Safari, even on Firefox its thinner. I have tried the following things, its a wrap up of all the time spent..

 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateZ(0);
 -webkit-text-size-adjust:100%;    
 font-smoothing: antialiased; 
 -webkit-font-smoothing: subpixel-antialiased;    
 -moz-osx-font-smoothing: grayscale;  
 -webkit-text-stroke-width: none;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 opacity:0.99;
 -moz-opacity: 0.99;
 -khtml-opacity: 0.99;

and still a lot more tests, which I never commented, so I dont have, however the only difference was made with opacity:.99; which after setting to specific divs made difference, but font is will wider than the original. In safari, its all pathetic, and I am tired now, I need a working example for all big 3s, I dont care about IE.. This theme looks like working in all browsers :

http://goo.gl/B6JyS

The only property I found in their CSS is -webkit-text-size-adjust:100%; to the body {} I tried both direct font adding and with Javascript method where it loads google fonts within a couple of seconds and repaints.. but nothing worked :( Please help..

regards

user1718343
  • 725
  • 2
  • 9
  • 18
  • I hope someone corrects me but what I've learned until now is that different browsers simply render fonts differently. I've spent countless hours trying to find some consistency but I always see differences. – Jonas Grumann Apr 04 '14 at 15:23
  • I totally agree that browsers render fonts differently, but the difference should be little not a LOT as I can see in my theme, but I can see that in the link above I mentioned, its more consistent and looks not 100% same but still with crisp.. – user1718343 Apr 04 '14 at 15:26

1 Answers1

1

Take a look here for some information regarding fonts in Chrome.

Google webfonts render choppy in Chrome on Windows

A simple trick I use to correct issues in Chrome/Safari:

-webkit-text-stroke: .5px;

This really smooths out fonts and provides at least a temporary fix.

Community
  • 1
  • 1
captainrad
  • 3,760
  • 16
  • 41
  • 74
  • Hi captain, I came across that post, however that for svg of files on server, I want it to be more versatile by using all Google fonts repository.. – user1718343 Apr 04 '14 at 15:29
  • @user1718343 the link merely explains that it is indeed an issue with Chrome. Have you tried the -webkit-text-stroke fix? (becuase it is prefaced with webkit, it will only use that rule in Chrome and Safari or any other webkit based browser. – captainrad Apr 04 '14 at 15:46
  • hi captain, I just tried, it DID make a little difference on Chrome but on Safari, its still the same blurry.. I will definitely update this post when I get a solution, rightnow I have to finish one other module, so will be back after a while.. THANKS for your suggestion and time.. cheers – user1718343 Apr 05 '14 at 01:37