Everyone wants their website to look stunning. Apart from amazing images and layout, it also means selecting the right font for the website.

At the root level, there are two ways to choose a font for your website:

i. Select a font that is unique and gives an individual flair to your website

ii. Select a font that suits your website theme – even though the font used may be common

Type the word ‘fonts’ in google and you’ll get mind boggling results. There are so many fonts available today that it is nearly impossible to categorize or classify them. At the basic level, fonts can be classified as those with serifs, those without serifs, those with scripts and those with decorative styles. However, there are many other ways of classifying fonts – old tradition, modern, futuristic, etc. And of course, the sub divisions are almost innumerable.  

There is a bewildering choice of fonts available today – free as well as paid. While everyone likes to use fancy fonts, you have to be pragmatic about using them. One, not all browsers display these fonts correctly. Secondly, they may not be readable at a lower resolution. Thirdly, fancy fonts usually need to be purchased. So, while fancy fonts give web designers a creative freedom, it is essential to be careful while choosing fancy fonts.

Despite so many fonts being available today (and more fonts being added each day!), good web designers stick to only a few fonts – Arial, Georgia, Verdana, Times New Roman, and a couple more. There is a solid reason web developers stick to these fonts. To understand the reason behind this, it is important to note that fonts are not rendered by the website. The actual font comes from the ‘fonts’ folder that resides on your machine. In essence, your machine should have the font that the website CSS asks for. If your machine does not have it, it shows the default font. And that may create many layout formatting issues. That is also the reason you need to write a CSS to give a choice of fonts so that if one font face is not available, it can be substituted for another. If the first font is not available on the device accessing it, it tries the next and so on and so forth. To overcome the limitation of using the same old fonts, the latest version of CSS introduced the ‘@font-face’ tag. This tag allows the browser to import / read the font from a specified location – usually the ‘fonts’ folder on the server where the website is deployed. However, despite embedding the font, many browsers still do not render the fonts correctly.