Anything to lose using non-standard fonts for web page content?

Posted on 2012-08-14
Medium Priority
Last Modified: 2012-09-10

I have heard there is an unwritten (or maybe it is written somewhere) rule to only use extremely basic fonts when creating copy or page content for a website.  How important is it to follow that rule?

I have been told that the rationale for this practice is related to not everyone having a full complement of fonts on their computer.  As a result, when the web page is rendered on their screen, their system has to replace the font with one it does has.

That makes perfect sense but the question that comes to mind is, "Do you really have that much to lose?"  In other words, suppose for example you want to use a font like Comic Sans MS because it fits more with the feel you want for the page.

When the page is rendered, users who have Comic Sans MS on their system will see it that way and everything will be peachy.  On the other hand, users who do not have Comic Sans MS, will see the page rendered in some more ordinary (boring) font supplied by their own system. The net effect is that you haven't really lost anything with the latter group compared to having used the ordinary font yourself (as is recommended) but you have possibly gained something with the former group who sees the more lively Comic Sans MS.

I am anticipating that there is some flaw in my thought process but I cannot figure out what it is.  If someone would therefore enlighten me, I would be most grateful.

Question by:Steve_Brady
  • 3
  • 2
  • 2
  • +2
LVL 34

Expert Comment

by:Paul MacDonald
ID: 38293609
The web browser tries to render the fonts using the font specified in the CSS.  If the font isn't installed on the local machine, the browser makes a substitution.  That's why there are common fonts in use - all OSes have those fonts.

CSS3 / HTML 5 changes this somewhat, but if you're not writing for those it does you no good.

Accepted Solution

ee_reach earned 2000 total points
ID: 38294375
I wouldn't say "extremely basic"... but it is true that if you don't use a common font, there is a good chance that most of your visitors would not see your website at its best.  

Obviously you would never want that.  In the best case, the browser will do its best to render in the page using some "boring" font."  But in the worst case, you'll end up with those weird little symbols (boxes, white spots, etc) because there is no counter-part in the "boring" font.

One thing you can do is to specify your "boring" fallback font.  You can use the font-family property to specify a list of fonts that the browser will try, going down the list until it finds a font on that machine.

Then check how your page looks with the boring font as well as the snazzy font.  Here's an article that talks about that and especially has pointers to other articles where you can find out what machines support what fonts:

Hope this helps

Author Comment

ID: 38294564
Thanks for the responses.

>>One thing you can do is to specify your "boring" fallback font.  You can use the font-family property to specify a list of fonts that the browser will try, going down the list until it finds a font on that machine.

That is a perfect solution.  It's probably standard knowledge for most HTMLer's but I'm brand "noob" at it so it's BIG info for me. In fact, every once in a while I get an EE pearl like this which makes me think, "Wow. That one answer or suggestion just paid my entire subscription cost for the year — x5."  So thank you for stumbling into my thread!

If I understand it correctly, I can basically include sort of a safety-net font which becomes the "worst-case scenario" and prevents the "weird little symbols" scenario—and at the same time, I can include the Comic Sans for those who are "snazzy" enough to handle it.

If that's correct then there really is nothing to lose, right?

Thanks again and btw, I like that word, "snazzy."  Mind if I add to my vocab bag?  ::))
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 34

Expert Comment

by:Paul MacDonald
ID: 38294599
Yes, the CSS font-family attribute allows you to specify a series of fonts.  The browser will attempt to render the page using the fonts in the order they're listed.  

You can specify font familys as well as fonts by name, so if you just want to make sure your page isn't rendered using a serif font, you can specify "sans-serif" and the browser will use an appropriate font.
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38295547
Probably a more up to date way of using non-standard fonts is to use a font library such as Google Fonts. This allows you to choose from a growing list of fonts that are stored on google's servers, so it doesn't matter whether a user has it or not. You simply add a link to the font in your documents head and then reference it in your CSS. Using the font-family property you can specify the font, along with fall back fonts if, for some reason, the user can't render the Google font. For example, in your html head, add this:

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />

Open in new window

And then in your CSS, you can use something like so:

h1 { 	font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif; }

Open in new window

Your page will then try to use the fonts in order, and eventually fallback to a standard sans-serif font if needed (unlikely).

Gone are the days of only having access to 10 or so 'standard' fonts.

LVL 53

Expert Comment

ID: 38297145
Are you doing the web page for your own pleasure, or to appeal to visitors.  If you do not specify any fonts, then the browser will use the fonts that the user has set.  So if you let the user decide what fonts they want to usedyou are more likely to make it appealing to them.  If you want to have variations in the fonts then use the generic font families: "serif", "sans-serif", "cursive", "fantasy", "monospace", and the browser will use the font the user has selected for that group.

It is not likely you gain any users who come to the site to see your font selection, but you risk losing some return visits from users who are put off by your selection.  If you impose your taste on users you risk losing some, without much chance of gaining anything from it.


Expert Comment

ID: 38310147
"If that's correct then there really is nothing to lose, right?"


"Thanks again and btw, I like that word, "snazzy."  Mind if I add to my vocab bag?  ::)) "
Go for it!

Btw, re the other responses, here are some pros and cons.

It is true that some people will use a font library such as one stored on google's servers.  This is more for people doing a personal website or for school project or similar.  Most truly professional websites done for news, e-commerce, and such would not depend on a free third-party service for their fonts since too many things can go wrong.  E.g., the third party server could go down or the third party could start charging for access, or they may eliminate the font that you have chosen, etc, etc, etc.  The potential for problems is endless.  

Also, as another poster mentioned, it is also possible to not declare fonts in which case the user's own preference would rule.  That is a nice thought. However, the problem with that is that the style of the user's font may not be suitable or it may throw the display of your page out-of-whack.

E.g., what if you had a military website or a wild west website or a website about 9-11 and the user was using comic Sans as their selected font.  So you would see comic-strip style text mixed in with military info or next to a cowboy rope or next to information about the terrible tragedy of 9-11.  Which would end up being a thematic mis-match and would make your website potentially less appealing.

So there are tons of options, but it's all a balancing act.  Everything depends on the reason for your site, what resources you have to invest in your site, whether your theme could handle that sort of variation in font style, what kinds of risks you are willing to take, etc, etc, etc.
Hope this helps!
LVL 53

Expert Comment

ID: 38312759
throw the display of your page out-of-whack.

If a page cannot tolerate the user's choice of fonts then it is a horrible design.  I can't imagine any valid approach where a change in font breaks a page.


Expert Comment

ID: 38384199
"If a page cannot tolerate the user's choice of fonts then it is a horrible design.  I can't imagine any valid approach where a change in font breaks a page.

Cd& "

Sure, for people who have experience that may be true. But the individual posing the question was a self-described neophyte - just the person who would be apt to run into that kind of problem and not understand why.  Hence the reason I at least mentioned the problem so he would have a chance to recognize it if he encountered it.

Kind regards,


Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question