HTML CSS Fonts | Web Fonts

css web fonts

In the previous post we have discussed the Browser Rendering Engines. We tried to give you a brief introduction of browser rendering engines. We have discussed a little bit about the web standards. We hope that it is not that difficult to understand CSS with us.

Now we are going to explain the CSS fonts which are used for the text in a website. It is very important to show your text in a format that is not irritating to look at. The CSS font or CSS font family selection is very important in this context. There many fonts available to use in a CSS file. Remember that if you do not choose a font style for your site. The browser will apply its default font style to show you text. But it may not please you a lot.

There are two big choices for you to make to select a font style for you website System fonts and Web fonts.

System Fonts

These fonts are very widely supported in most of the browsers. These can be a choice for you keeping in mind the cross browser compatibility. These have limited choices for you to use. Let us see some of them:

Serif Sans-Serif Monospace Cursive
Times Arial Courier Comic Sans
Times New Roman Helvetica Courier New
Georgia Verdana Monaco

These are the system fonts that you deal with most of the time when you go on to use Internet. Why the system fonts are so popular on web. You should know that when you specify a CSS font style for your website the font should be installed on the client’s machine. If it is not installed on the client’s machine then it will turn to the system fonts specified or default. For this purpose the font family is introduced in CSS. Let us see the following example to understand more:

div p{

font-family: Arial, Helvetica, Verdana, sans-serif;


In the above CSS code example you can see that we have used a font family for the font styling. The browser will first look for the Arial font on the client’s machine. It is not installed on the client’s machine then it will look for the Helvetica font on the client’s system. If it did not find the Helvetica then it will search for the Verdana font. On the end if it did not find any of the first three fonts it will take the last system font sans-serif to show the text. The fonts Georgia and Verdana were specifically designed for screens. But now there are so many fonts to use for screens in the form of Web fonts.

Web Fonts

css web fonts

These fonts are getting popularity for their styles and emerging techniques. These are the latest development in the field of CSS web fonts. The big disadvantage at the time being is that they are not supported by the old browsers. These fonts are requested by the browser in the page’s style with a @ sign in the start like @font-face. These web fonts allow the developers to don’t think about that whether the font will be installed on client’s machine or not. Let us see how we use the web fonts in CSS.


font-family: ‘fontName’;

src: url(‘fontName.eot’);

src: url(‘’) format (‘embedded-opentype’), url(‘fontName.woff’) format(‘woff’),

url(‘fontName.ttf’) format(‘truetype’), url(‘fontName.svg#svgFontName’) format(‘svg’);


In this code above you see that it is pointing towards an external font resource on the web. You can get these web fonts from the web font hosting services or other resources on the web.