Websafe, sans-serif fonts rendering as a Standard Serif fonts

[sheepysheep60]

Hello, I’m currently making a website which is at:
[http://test.foodserviceconsultant.org/](http://test.foodserviceconsultant.org/ “http://test.foodserviceconsultant.org/”)

At present, my client is complaining that the fonts are partially sans-serif, and partially serif.

Image:
http://i45.tinypic.com/1e7zg7.png

Now, I’ve been doing this a while, and my font stack looks like this:* {
font-family: verdana, tahoma, geneva, sans-serif; }

Which, last time I checked, was about as cross browser as it gets, but I can’t deny their screenshot, they aren’t showing up right. It shows the wrong fonts in Firefox and Safari. Also, if you look at their screenshot, you’ll see that Verdana is crossed out, as far as its concerned it is rendering… any ideas? I’m banging my head against the wall with this!

Many thanks!

Dave

Extra – Here is how I experience the site, and how it should look:
http://oi45.tinypic.com/2nso1sz.jpg

[sheepysheep60]

Thanks @ChrisP for checking, I’m sure something is up with their operating system.

Can anyone else shed any light on this/do you get any other results?

[neerukool]

The Screenshot suggests that it’s a Mac. And i guess the font is falling to Georgia.
You can try putting sans-serif inside single quotes.. Or put helvetica:
font-family: verdana, helvetica, tahoma, geneva, sans-serif;

Let me know if that helps.
Cheers! :)

[sheepysheep60]

Looking good!

Either, @neerukool helvetica fixed it, or @jurotek moving the universal declaration to the body tag did, either way thank you all. I still am not entirely sure why a Mac with Chrome and Firefox wasn’t displaying a websafe font, but oh well!

Thank you all very much, its really appreciated.

Dave

[chrisburton]

@sheepysheep60 Windows and OS X have different fallbacks. If you’re only setting a fallback to let’s say, Arial, OS X won’t have that. You would need to set it to Helvetica.

body {
font: normal 300 15px “Custom Webfont”, Helvetica, Arial;
}

I usually put Helvetica first for fallback in case the webfont fails and users on Windows have it installed as it will look the same on both platforms.

[sheepysheep60]

Thanks everyone. @jurotek that’s a great read, really nice looking website too : )

[Author]

Posts