Best way to use custom fonts on your site

cross browser web fonts

If you use custom font in your website using @font-face,then it may possible that it will not display fine in some browsers.

This is due to the font-face browser dependency (every browser supports @font-face slightly differently).

for resolving the cross browser web fonts we have to use different font file for different browser.

Here is the link from where we can get a complete kit of a font files.

font-face Kit Generator
http://www.fontsquirrel.com/fontface/generator

It is very simple to use.
Upload your font file (generally with .ttf extension) with [+Add Fonts] button.
Select your option and check agreement check box.
Click on [Download your kit] button.

Here you will get a prepared zip file for the same.
Download that and use according to your need.

Put font file in a folder, give the path of the same in css file.
Use the css and you will found the same result,you want to get.

You also found a specimen/example to use the font-face in the kit.

Basic web fonts syntax

The @font-face rule

First you insert a block in your CSS, describing a web font you want to embed into your page. This information is all wrapped inside a @font-face block

@font-face {
  font-family: 'Abril Fatface Regular';
  src: url("AbrilFatface-Regular.otf");
}

Standard font-family declaration

h1 {
font-size: 8em;
font-family: 'Abril Fatface Regular', sans-serif;
}

Other @font-face options

@font-face {
font-family: 'Abril Fatface';
src: url("AbrilFatface.otf");
font-weight: bold;
font-stretch: condensed;
unicode-range: U+0026;
}

If you want to know why all this works as above, follow Paul Irish’s Bulletproof @font-face syntax.