Forums

LaurelBrittany

http://www.lwebdesigns.net/templates/luannarodham/index.php

I loaded an aller font onto this website for the header tags. I have a ttf, eot, woof, and otf loaded. It was originally a ttf and I used a converter to convert the others. Any idea why it would look good on firefox and ie but not on webkit browsers? I did try putting this in the body -webkit-font-smoothing: subpixel-antialiased !important; and it did nothing.

Should I use a different font? What would be a good one to use for my headers?

standuncan

I have noticed recently a lot of the non-standard fonts I have been using look terrible in Chrome, not necessarily all Webkit browsers though. Even when using Google fonts, go figure. I believe it is just the way these browsers render the font and there isn't much you can do about it.

LaurelBrittany

Yeah, I have noticed that too! It looks fine for h3 and h4. I will try to find a different font for h1, h2, and h5. I wonder if there is a way to make a different font load for Safari and Chrome.

kgscott284

Luckily the majority of users prefer firefox over chrome...so at least the majority will see the text in all its true-type glory :)

matthewb

you can use css hack specific for webkit browsers(chrome and safari) to load different fonts in your webpage.

LaurelBrittany

Matt,

How do I do that :D? Do you know of any good tutorials?

LaurelBrittany

Nevermind, this worked like a charm

@media screen and (-webkit-min-device-pixel-ratio:0) {
    h1 { font-family: Arial, Verdana, San-Serif; }
}

kgscott284

Added that one to my snipplr...Thanks @matthewb for pointing it out and @laurelbrittany for digging up the code...I had the same issue but disregarded it...

chrisburton

Heh. Seems like bad practice to be doing this. We should be using fonts that are optimized for the web.

kgscott284

@christopherburton, I do use web optimized fonts...but i have had some display issues and this fixes them. Can;t speak for anyone else however...but good call.

chrisburton

Perhaps the fonts you're using are just saying they are optimized but really not? Where are you all getting your fonts from? I haven't had issues but that's not to say I'm right.

kgscott284

fontsquirrel & typekit...typically the issues are more with fontsquirrel than typekit however.

chrisburton

Hmm. Typekit should be pretty solid. I started testing Brandon Grotesque on my site 3 months ago (still in design stage) until typekit added it to its library and have seen 0 issues cross-browser.

brentwpowell

I've run across a lot of bad looking fonts in Chrome on Windows, but the same fonts looked great in the Mac version of Chrome. With a little further research it turns out that Chrome in windows, for whatever reason, uses a software approach for anti-aliasing fonts, while Firefox and IE9 use hardware accelerated DirectWrite to accomplish the same task. This is only an issue on Windows, as it has to do with DirectX. Sorry, no solution, but maybe with some more awareness, Google can add some hardware anti-aliasing to Chrome.

chrisburton

I thought the code below was a fix for that?

-webkit-font-smoothing: antialiased;

Also, I noticed that the nav links on http://teamtreehouse.com looks awful on Windows (perhaps Chrome alone, haven't tested other browsers).

LaurelBrittany

I thought so too. I tried that and it didn't fix my problem :/.

brentwpowell

You had my hopes up!
Just tried it and it didn't work for me. I tried the code on some Google Web Fonts that I've known to have some issues in the Windows version of Chrome and Safari. The way I understand it, it is more dependent upon the anti-aliasing process. Chrome for Windows does anti-alias but just not as good as what DirectX can do. I looked into the above code, and it seems to only affect WebKit browsers on the Mac. Anyone else have any experience with this? I would love to be proved wrong!
You can impose a hack and add

text-shadow: 0 0 1px rgba(###,###,###,.5)

but that doesn't really address the issue.

chrisburton

Oh, right. I forgot that solved the Mac issue. But yeah, I don't use Google web fonts so I can't answer there. However, I haven't seen issues with it on Typekit (at least with the fonts I use).

springlab

Try using the fontsquirrel.com @FONT-FACE GENERATOR with your fonts and click the expert settings. I can't remember off the top of my head at this time without going to fontsquirrel, but I believe there used to be a setting to help font rendering. Anyway for what ever reason it generates fonts better then most. I had the same issue with chrome fonts and a lot better luck generating my own. Good luck.

standuncan

Interesting read and lots of good info. I wish Chrome would just upgrade their rendering process, makes me feel about them like I do about IE a little bit.

TheDoc

@standuncan - it's unfortunate, but there are a few bugs in Chrome. It does't handle full-page backgrounds very nicely as well as websites heavy on shadows. I'm actually to to do workarounds for Chrome recently, pain in the ass!

SamLar

Hmmm... I don't completely agree here. First of all I have the same issue. My font-family fonts look horrible on Chrome Windows. Now, fact is, I am using the same font as CSS tricks here for testing and the body font of this site looks pretty awesome to me in Chrome. Ever checked out? So, as mentioned before in this thread, I don't think this is just a rendering issue based on the fact Chrome uses a software approach. I think it's a conversion problem maybe? Would be interesting to know in detail how CSS tricks approached this issue for their site?

chrisburton

Typekit

joshuanhibbert

As @ChristopherBurton mentioned, Typekit is the answer. They individually hint each typeface for each browser and OS. Also, you may learn a bit more from reading this: http://daneden.me/2012/01/why-do-my-fonts-look-so-bad-in-x/

SamLar

Yeah. Found the source of the problem. I used FontXChange to convert fonts which seems to have issues to convert them properly for Windows. Fontsquirrel and all good. So - if any of you use FontXChange just keep an eye out.

kreativmaestro

guys, can anyone help me out. this is weird. I am using a font named "Existence-UnicaseLight" using @font-face.

when i am appling just

@font-face { font-family: "Existence-UnicaseLight"; src: url("../fonts/Existence-UnicaseLight.eot"); src: local("☺"), url("../fonts/Existence-UnicaseLight.woff") format("woff"), url("../fonts/Existence-UnicaseLight.otf") format("opentype"), url("../fonts/Existence-UnicaseLight.ttf") format("truetype"), url("../fonts/.svg#Existence-UnicaseLight") format("svg"); }

@font-face { font-family: "Existence"; src: url("../fonts/Existence-UnicaseLight.eot"); src: local("☺"), url("../fonts/Existence-UnicaseLight.woff") format("woff"), url("../fonts/Existence-UnicaseLight.otf") format("opentype"), url("../fonts/.svg#Existence-UnicaseLight") format("svg"); }

chrome just doesnt show anything and foolly when i apply

@font-face { font-family: "Existence-UnicaseLight"; src: url("../fonts/Existence-UnicaseLight.eot"); src: local("☺"), url("../fonts/Existence-UnicaseLight.woff") format("woff"), url("../fonts/Existence-UnicaseLight.otf") format("opentype"), url("../fonts/Existence-UnicaseLight.ttf") format("truetype"), url("../fonts/.svg#Existence-UnicaseLight") format("svg"); }

@font-face { font-family: "Existence"; src: url("../fonts/Existence-UnicaseLight.eot"); src: local("☺"), url("../fonts/Existence-UnicaseLight.woff") format("woff"), url("../fonts/Existence-UnicaseLight.otf") format("opentype"), url("../fonts/.svg#Existence-UnicaseLight") format("svg"); }

and define : body { font: 13px/1.5 'CALIBRI', Arial, 'Liberation Sans', FreeSans, sans-serif; } it woks. wtf***.

can ansy one help also how can I stop Chrome rendering my font bad.

kreativmaestro

okay i solved by myself. That was because .ttf wasn't defined. can someone help me in antialising nature of Chrome???

chrisburton

-webkit-font-smoothing: antialiased;

bfredit

font-smoothing: antialiased; is not the answer to anything but icon-fonts and large display type.

http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

Krish1980

Try this


@font-face {
    font-family: 'akzidenz-grotesk_bqregular';
    src: url('fonts/akzidenzgrotesk-regular-webfont.eot');
    src: url('fonts/akzidenzgrotesk-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/akzidenzgrotesk-regular-webfont.svg#akzidenz-grotesk_bqregular') format('svg'),
         url('fonts/akzidenzgrotesk-regular-webfont.woff') format('woff'),
         url('fonts/akzidenzgrotesk-regular-webfont.ttf') format('truetype');        
    font-weight: normal;
    font-style: normal;

Notice the order - eot on top, followed by svg. Apparently, chrome and safari render the fonts well when svg is at the top, or the second from top at least (eot is for IE). I've noticed that this at least removes the jagged text one encounters in Chrome and Safari. The flip-side is that some fonts might appear smudged.

chrisburton

That's actually debatable and depends on the font.

Krish1980

That's actually debatable and depends on the font.

That's true - some fonts appear horribly smudged. But it seems to remove the jagged edges which , I believe, is what most people encounter on Chrome and Safari.

chrisburton

I was referring to the posted link by the person above you, sorry.

tracker1

@LaurelBrittany ... any system with Verdana will have Arial, so the fallback isn't needed... also, Arial is fashioned after Helvetica and renders better than Helvetica on Windows, which is the default sans-serif. Helvetica is the default on OSX which looks better... On other OSes it's another similar sans-serif font. Best for people to simply use "sans-serif" as the default, not specifying Arial, or Helvetica ever.

I cry a little inside when I see font definitions like: Arial, Helvetica Neue, Helvetica, Open-Sans, sans-serif ... where on most platforms, it's the same as just using sans-serif, and if you happen to have more than one of the fonts installed, it may be using one not well hinted for that platform... just use 'sans-serif'

chrisburton

I cry a little when anyone uses Helvetica. But regardless of the platform, Helvetica isn't all that great on screen.

In my experience, I don't ever recall seeing font stacks described above. Usually it's something like:

Helvetica Neue, Helvetica, Arial, sans-serif

treehouse : what would you like to learn today?

Forums

@Font Looks Bad In WebKit Browsers