Cross Browser Web Fonts Using @font-face support

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

[sourcecode language=”plain”]
@font-face {
  font-family: ‘Abril Fatface Regular’;
  src: url("AbrilFatface-Regular.otf");
}
[/sourcecode]

 

Standard font-family declaration

 

[sourcecode language=”plain”]
h1 {
font-size: 8em;
font-family: ‘Abril Fatface Regular’, sans-serif;
}
[/sourcecode]

 

Other @font-face options

 

[sourcecode language=”plain”]

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

[/sourcecode]

 

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