Use Your Favorite Font on Your Website with CSS Web Fonts | WebReference

Use Your Favorite Font on Your Website with CSS Web Fonts

By Arpan Dhandhania


In the early days of the Internet, typography was a phase of website design that was either completely overlooked or given just a few minutes if time permitted. Over time, a website's visual appeal grew more and more important until typography was given its rightful place in the design process. While pictures and graphics may draw the user to your site, in the end it is the content (i.e. the words) that the website is out there to convey. So eventually, you have to make the text look appealing too.

So how do you make your text appealing? Well, begin with the text itself. It should be easy to read, to the point, and in the case of the Internet, short. It's a known fact that not many people like to read on the Internet for extended periods of time.

Inadequate Text Options for the Web

In the early 2000s, other than making the text read well, there was very little you could do to make sure the user kept reading. You had a very limited set of fonts to choose from, and as most browsers supported only Web safe colors, even your color palette was rather restricted.

To overcome this hurdle, Web designers began to employ a simple trick. If they wanted to use a particular font for a heading or quotation, they would create an image with the text in that particular font and place the image where the text would appear. While this seemed to work, it came with its own problems:

  • Every time you wanted to change the text, you had to use an image-editing tool to change the image and then upload it again to your server.
  • If the user finds the text on your website too small to read, he or she can very easily increase the font size of the text. The text in an image however would not scale up, leaving the visitor frustrated.
  • On a slow Internet connection, images take forever to load.

Adobe Flash offered a much better solution. You could build your entire website using Flash, which allowed you to use any font you wanted to. You bundled the font with the Flash file so that the text could be rendered correctly on any machine. Many Web designers thought of this as the perfect solution, but it came with its own problems as well. For example, Flash files are bulky and take a long time to download on slow Internet connections. Also, with Apple taking a strong stance against Flash, your site won't work on the iPhone or the iPad.