Use non-standard font in web pages

Normally your website visitors can only see the fonts that are already installed on their system.

So if you use a font(non-standard) that is not installed on site visitor’s computer then his browser will show some other font that is on their computer. That’s why when you are defining a font for an element (such as <span>,<div>) you often specify multiple fonts so that if your preferred font is not available, then CSS(Cascading Style Sheets) file should use the available alternatives.

font-family: verdana, sans-serif;
Here verdana is preferred and sans-serif is alternative.

This can be really annoying if you want to use a nice font in your website.

Conventional way of using custom fonts for headings and logos etc.is creating the text in a graphic editor and then using the image file.From the perspective of SEO this is not appropriate solution,you must use text as much as possible.

Now there is a way available in CSS that lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say copse_font.ttf, and upload it to your server where your website is hosted.

Then from within your CSS file (or wherever you are defining your styles) you have to refer to that custom font in the following manner.

@font-face {
font-family: copse_font;
src: url(‘copse_font.ttf’);
}

span.custom_font{
font-family: copse_font; /* no .ttf */
}

You can get some free fonts file from here.

http://www.webpagepublicity.com/free-fonts.html
http://www.1001freefonts.com/fonts/afonts.htm

There is another option to use custom fonts in your site is via Google API. However, not so many fonts available so far in Google Font Directory.

You can go there by the link below.
Google Web Fonts API