Hey Everybody! First time poster so be kind

 

For years I've faced this issue. Every site of ours SOMEHOW has ended up heavy on this font family. Designs in Photoshop always look great... then coded looks bad. It's like the stroke of the font itself is too fat. I would totally accept this as being a typical web irregularity but somehow on one of the pages buttons of our site it's coming off as a thinner stroke exactly as I would hope in Safari.

 

I have tried EVERYTHING matching the CSS to the "T" and I can't get my other page to use a thinner stroke (weight or whatever) as the one I like does. Check out these Safari screenshots to see what I'm referring to:

 

 

(what I want and is currently LIVE on the site without being an image)

 

 

(what I don't want as it's too thick and is LIVE on the site)

 

How does this font family work out for you vs my screenshots? I'm betting thicker. But hoping there is a trick. I've tried font weight at 100 with an !important but doesn't seem to do the trick.

 

And if there is no answer to this then is there a font alternative that looks almost the exact same as the thinner css georgia or times roman font I'm looking to match? I just HATE the thicker stroke as it looks bold and it shouldn't.

 

Thanks for any advise on this matter. It's driving me nuts

Hi JLS and welcome. Could you post links to each page/button on the site so that I could check the code that is being given to the buttons

Thanks for the quick response!

 

To be honest I was hoping I could get instruction without it. Reason why is that it's on an un-released part of our website and it's behind the walls of a wordpress site in maintenance mode where another developer is working on the coding etc. So if it's impossible to help me without it... I'll setup a wordpress user so you can get in, take a glance, and help me out. But otherwise and incase it helps

Here is a totally stripped down test I did on a test account/domain I have. Please check out http://bluevisionweb.com in SAFARI. It's displaying in the text that is to bold-ish. Is there anyway humanly possible via CSS that you can think of to make the weight/bold or whatever less? Or a font that is close to that style but is thinner that could replace it nicely?

 

I took a screenshot again of my live sites buttons with the thin stroke that I promise are not images. It's how the css text appears which is how I like:

http://bluevisionweb.com/compare-image.png

 

Thanks!

Hey JLS,

 

If you check out this demo I just put together. http://codepen.io/HeyDanReeves/pen/EvacA

 

The CSS property you're looking for/at is font-rendering. This is unadvised however for reasons outlined here: http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ as well as the property being -webkit- only, so you can only cover chrome, safari and soon opera with this.

 

Hope this helps.

Thanks! That does help and totally looks to be what's going on! I've checked all the CSS and page templates I can think of and don't see any reference to font smoothing properties but after reading all the comments on the link you provided I'm thinking something on the page must be turning the smoothing off automatically maybe and that's why that one single page is different then others. Not sure but that's my suspicion.

 

I'm not sure I'll fully agree with their reasoning of abuse. I won't use it on my normal paragraph text but on these headers that are driving me insane I think I'm comfortable using it for whatever browsers it works on at least. Just seems like they are taking a purest and legibility approach vs what is very readable and looks the best design wise. Having worked at my in-laws sign shop for years it was always a constant battle of sign readability vs attractive design arguments. I always try to find a happy medium if you know what I mean. Maybe I'm an idiot for thinking that I'm not sure but that's what I'm leaning towards.

 

Thank you so much for ending my wild goose hunt!

safari on windows at least, is always a lot bolder than other browsers

Hi.

If your Wordpress project is being developed from an existing template check is there's any javascript font replacement. A lot of WP templates use "Cufon" ect. that renders eg. menu items as multi resolution bitmap images. You won't be able to see that in the CSS. And it could be that the Webkit browsers choose another resolution than other browsers. Just a gues.

 

UPS! I Just saw your example. no javascript just browser css-interpretation. But mabe my comment will be useful to others. Always Check your CMS themes for JS font replacement.

Edited February 24, 201313 yr by Nillervision