The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:
    []( “”)

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


    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!


    Extra – Here is how I experience the site, and how it should look:

    # January 7, 2013 at 12:33 pm

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

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


    # January 7, 2013 at 1:11 pm

    This reply has been reported for inappropriate content.

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

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed