Background

The Problem:

One of the most important elements of web design is font selection; finding the font that suggests the right mood, era or geographic location while remaining legible on the screen is not an easy task. Finding the right font and having that font supported on most user platforms is even harder.

The "Solution" pt. 1/3:

Replace the text with a static image of the text rendered in your obscure font. Image Replacement at it's most literal. Easy! It's done, right?

Not so fast...

Complications:

To cut to the chase, there is no "holy-grail" solution, but by assessing what all the complications are, we can find better ways to achieve font-bliss. Let's take a look at factors to consider before taking the plunge.

HTML Markup Semantics-
One of, if not THE, guiding principle of modern web design is that HTML markup should maintain semantic relevance. Incorporating a paragraph of text or a line of a heading as an image is both cumbersome and misleading. If it's text you want on the screen, it's text you should have in the markup.
SEO (Search Engine Optimization)-
Search engines such as Google treat <img> tags with alt="" attributes differently than they treat regular text. If you include an image in your <h1> tag instead of text, you will be sacrificing some page-rank, which for sites that don't already have a swath of followers/visitors could be very detrimental.
Accessibility-
Making sure your page can be read accurately by screen readers is important, as is making sure your fonts can be resized without destroying your layout. This is always a tricky field to navigate when weighing the costs of using decorative visual elements, but remember, search engines are also kinder to pages that are 508 Compliant.
User Browser Preferences-
Along the same lines as Accessibility, we need to, at a very minimum, be AWARE that some users disable images in the browsers preferences and that some users will override our style sheets and still expect to get all the textual content in the page.
Image Resolution-
Computer fonts are designed such that even at large sizes and high zoom levels they remain sharp and crisp. Needless to say, if you start with an image of 16pt font and zoom in a few levels, you will be a little dissatisfied with how it renders.
Text-Selection-
Anytime you replace text with an image, you sacrifice the ability for a user to copy the contents of the text. While this may seem like an advantage in terms of intellectual property protection, this sacrifice also flies in the face of one of the basic tenets of the internet: freedom of information.

The "Solution" pt. 2/3:

The enhanced version of the basic solution uses CSS and a little extra HTML markup to get the job done. The basic idea is that you write the tag like you normally would and also include the text as a background-image in the CSS of that element. This is known as Fahrner Image Replacement or FIR.

To do this, add a <span> around your text and hide the contents of your <span> leaving just the background-image showing. However, many screen readers do not read over text which is hidden with "display: none".

There are numerous variations to the basic FIR technique involving various combinations of "display: none", "visibility: hidden", or, my personal favorite, "text-indent: -5000px" which keeps the text "visible" to screen readers but very far off the page. The pitfall with the latter technique being that someone viewing the page with your style sheet but with images off would see nothing. The most irritating drawback of these techniques is that they all use additional <span> tags which have no semantic relevance.

The "Solution" pt. 3/3:

What better way to avoid writing a few extra <span> tags for your stylish headers than concocting a fancy script that will do it all for you!

There are two free and relatively easy-to-use systems for doing this:

We will now take a look at each one in detail!

Golly... this page... these headings... they sure do look bland!