0

https://i.stack.imgur.com/usRIP.jpg

That's a little screencap of the headers on a site I am working on. I wanted to use a google web font (quicksand) and it looks great in firefox. However it looks skinny, jagged and worst of all isn't the same size even so it doesn't span the entire menu.

I've tried googling this and it seems this is currently not fixable from what I can tell. Is there any way to use one of these fonts without this problem? The only thing I can think of is using images instead of text but I don't really want to do that.

I think this problem only becomes really apparent with smaller font sizes. But I still think there is a difference in bigger sizes too just not as noticeable.

Sackling
  • 1,780
  • 5
  • 37
  • 71

1 Answers1

0

You can specify a text-shadow of the same color as the background:

text-shadow: 0 1px 1px white;
Blender
  • 289,723
  • 53
  • 439
  • 496
  • Sorry, no idea why I copied that code over. Try the above code (fiddle with the color, as I don't remember if I used `white` or `black` in my test). – Blender Dec 05 '11 at 05:33
  • Ok thank you. Using black or a darker grey looks a lot better. It does kind of look like it has a shadow though.. Not exactly the same as the firefox one. Also there is still the issue that it is not taking up the entire width of the menu bar like in firefox. But I supposed that is possibly some other css? http://i.imgur.com/BtJ5r.jpg – Sackling Dec 05 '11 at 05:40
  • You can use CSS3 box-model for that. Also, try tweaking `letter-spacing`. – Blender Dec 05 '11 at 05:41
  • Ok thank you for your help. This is a major pain to make it look good on all major browsers.. – Sackling Dec 05 '11 at 06:27
  • is there a property for webkit only browsers? as it is I have to see the shadow a bit in firefox. – Sackling Dec 05 '11 at 06:31
  • Not that I am aware of, but you can [negate it for Firefox](http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css). – Blender Dec 05 '11 at 06:32
  • 1
    If you want nice evenly-spaced menu items, check out my answer to [this question](http://stackoverflow.com/questions/6509183/evenly-spaced-navigation-links-that-take-up-entire-width-of-ul-in-css3/6515301#6515301). It's CSS3, though. – Blender Dec 05 '11 at 06:39