Fonts can be a great way to add a little style or flare to part of your site. A big block of text that has a few words that stand out in them can really make a difference when converting a sale, or even providing information. The only problem is there are very few fonts to choose from. 

The why

Fonts are traditionally the responsibility of the operating system. When we crate a web page what we are really creating is a bit of code that a browser like Firefox or Google Chrome can use to render the page.  However when the browser renders a page it needs to know what font to make the text. We can use styles and css to tell it to use a pituclar font, but if the computer doing the rendering does not have that font installed then the browser can not  render it.

More on rendering

So basically what a web server sends to a browser when you type in www.coteyr.net is a list of instruction on how to display a page.  Instruction like place text here, put that sentence there, display this image there. In the end it is the browser that has to do the actual placing of text on the screen, retrieving and putting images in one place or another, and other tasks. This is called rendering. It’ is important to know this because, in the case of fonts, the rendering of the font is done in the browser, so the browser has to know about that font. 

What are fonts

Fonts are basically macros for how to render things. In this case, a font is a macro for putting a bunch of dots on the screen in the shape of a letter or number. There are other types of fonts, like sound fonts, midi fonts, et. al. but the only ones we care about right now are text fonts.

The Problem

The problem is that not everyone has every font on their computer. Some people have several hundred fonts installed and some people have never installed a font themselves and only have what their computer came with. To make matters worse, not every computer comes with the same fonts. Different Operating systems and even different versions of the same operating system come with different fonts. When you take this in to account and remember that the browser can only render text in a font that you have installed, you start to see the problem. 

The Solution Pt. 1

The solution is simple. Every browser recognizes a special set of “meta-fonts” that can be used. These fonts are:

  • Serif
  • Sans-Serif
  • Monospace

These three “meta-fonts” tell the browser to pick a font that is installed and meets a set of requirements and just use that font. It’s not perfect but it guarantees that every browser (excluding text based browsers, or other special display browsers) will be able to display some kind of font change. 

The Solution Pt. 2

So your not happy with just three choice? Well your in luck. There are several very common fonts that almost every computer has installed. Not everyone will have them, but almost everyone will. You can safely use these fonts to liven up you text with out to much risk of someone not seeing them.

  • Georgia
  • Times New Roman
  • Times
  • Arial
  • Helvetica
  • Tahoma
  • Verdana
  • Courier

Other Solutions

Don’t like only having only 8 choices. Well this is where we hit the brick wall. You can specify other fonts for the browser to use, but keep in mind that not everyone will have them. If you have created a layout based on the fullness of text or the specific font standing out, then your in for a big problem if someone viewing the site doesn’t have the font you want to use. The sections below will go over some options and their pros and cons. 

Text as Images

You could render all the text that is in a different font as an image. This might get the page to look the way you want it to but has some pretty big downsides. First the page will load slower. Next, search engines and other web crawlers will not see the text (because it’s not text anymore). In addition, there is no way to make every page look the same so you could be making a problem worse (remember it’s the browsers job of rendering a page and not all browsers will render it the same way). Also, other text based things like screen readers or even the find function won’t work on images.  If you simply must have the one font, then this may be the best choice. But if your whole web site layout depends on a font, you might want to find a new designer.

sIRF

There is a flash and javascript solution out there that will replace portions of text with flash. The rendering of the text is done in flash and thus can use a different font. The idea looks very interesting but in practice is very bad. It has a few good uses, like replacing one line of text, but any more then that and you have a problem. Add to that, the fact that most mobile browsers (and thats a growing market share) won’t use flash, and that on every platform flash is unstable at best, and you begin to see why this might not be the best solution. In truth it is very interesting, and easy to use, but also very easy to mess up.  The flash replacement of text might be ok for you but you need to really consider all the negatives of this. I would never recommend this to any of my clients and when I find clients using it I always recommend they stop.

The best solution

The best solution is simple. Take your 8 choices above and make a wonderful website. Any good web designer can do it. Just look around. Being dependent upon images and flash for text based content is a very bad thing. Having text as text is a very good thing. 

Coteyr.net Programming LLC. is about one thing. Getting your project done the way you like it. Using Agile development and management techniques, we are able to get even the most complex projects done in a short time frame and on a modest budget.

Feel free to contact me via any of the methods below. My normal hours are 10am to 10pm Eastern Standard Time. In case of emergency I am available 24/7.

Email: coteyr@coteyr.net
Phone: (813) 421-4338
GTalk: coteyr@coteyr.net
Skype: coteyr
Guru: Profile