Grow your CSS skills. Land your dream job.

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

  • # January 7, 2013 at 12:26 pm

    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

    # January 7, 2013 at 12:33 pm

    @sheepysheep60, I’m seeing Verdana in Chrome and Firefox on Windows..

    # January 7, 2013 at 12:40 pm

    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?

    # January 7, 2013 at 12:45 pm

    @sheepysheep60, just out of curiosity, have you tried !important and seeing if it displays as verdana for your client?

    # January 7, 2013 at 12:45 pm

    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! :)

    # January 7, 2013 at 12:55 pm

    @sheepysheep60, in your css there are 15 different font family declarations. You start with universal selector font family declaration which actually should be in your body tag. Than you repeat many times verdana without any fallback and that apply to your arial and georgia as well.

    # January 7, 2013 at 1:02 pm

    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

    # January 7, 2013 at 1:11 pm

    @sheepysheep60, declare your main font family in body tag (not move universal selector to body tag) maybe I wasn’t clear about that. Take care of those duplicate declarations without any fallback. [Here's good reading on font stacks in OS...](http://www.awayback.com/revised-font-stack/ “”)

    # January 7, 2013 at 1:24 pm

    @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.

    # January 7, 2013 at 3:22 pm

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".