Why Use Real Fonts on the Web?

Posted in CSS
Tags: , ,

Search engines understand text, but using text in an HTML webpage typically means using fonts available on the end user’s computer. That doesn’t give designers a lot of choice. There are now many techniques available to supply¬†a font the browser will download and use, greatly expanding the design possibilities. The text remains live so search engines can fine and understand it and edits are much easier.

CSS Image Replacement

One approach to using non-standard fonts on your website is to use images. Images alone would not be very search-engine friendly though, so using CSS to replace the HTML text with images gives you the best of both worlds — text for search engines, and rich, appealing images for users. This may be the only option if the font license does not allow web embedding.

Here is a great article from CSS-Tricks showing the variations of this technique.


Image replacement can be a good option for static websites, but dynamic sites like blogs, automatically generate the headlines from a database. Maintaining images for each headline would be a nightmare. a JavaScript called Cufon takes care of that for you. It reads your text and replaces it with images automatically!


Typekit.com is a online service that hosts and serves fonts for websites. They have hundreds of fonts to choose from for a yearly fee. They handle nearly all the coding for you, so its very easy to use, though basic knowledge of CSS selectors is required.

Google Fonts

Google also hosts a handful of fonts, free to use for any website. Similar to Typekit, Google hosts the fonts and provides the code to make it all work.

CSS @font-face

Behind the scenes web font services like Typekit and Google are using the standard CSS @font-face to import the fonts. You can also use the CSS @font-face with your own fonts, hosting them on your site.

Leave a Reply

Your email address will not be published. Required fields are marked *