Cross Browser custom font

Designers and Developers generally go with traditional uni-platform font families ie. Arial, Helvetica, san-serif.

But if we use a custom font in design it is also easy to integrate in our webpage.

Method 1 – @font-face in CSS

@font-face {
  font-family: 'Yanone Kaffeesatz';
  src: url('fonts/YanoneKaffeesatz.eot'); /* IE6,7,8 */
  src: local('YanoneKaffeesatz'),
       url('fonts/YanoneKaffeesatz.ttf') format('truetype'),
       url('fonts/YanoneKaffeesatz.otf') format('opentype'), /* non-IE */
       url('fonts/YanoneKaffeesatz.woff') format('woff'), /* IE9 */
       url('fonts/YanoneKaffeesatz.svg') format('svg'); /* for graphic */
}
font-family: 'Yanone Kaffeesatz';

This specifies the font name to be used in a stylesheet. If the the font name has space/s then font name must be in single or double quote.

src: url('fonts/YanoneKaffeesatz.eot');

The EOT type is supported in Internet Explorer 6,7 and 8. So if the page is opened in IE it checks .eot extension and ignores the rest.

src: local('YanoneKaffeesatz')
This checks whether the font is already exist in your system. If yes, then it will picked up from your system itself instead of downloading it from the source defined in stylesheet (in above example the font is located in ‘fonts’ directory).

url('fonts/YanoneKaffeesatz.ttf') format('truetype')
Most of the browsers has support for TTF (true type font) extension.

url('fonts/YanoneKaffeesatz.otf') format('opentype')
Open Type fonts works in non IE browsers.

url('fonts/YanoneKaffeesatz.woff') format('woff');
Where as WOFF extension supported in IE9

url('fonts/YanoneKaffeesatz.svg') format('svg');
SVG fonts are used for graphic purpose ie. logo using font instead of image.

OTF and TTF are mostly and easily available formats. But for other formats we will need to convert the font in different formats. For this you can refer following online resources to convert the fonts (make sure the fonts are legal or free).
http://www.fontsquirrel.com/fontface/generator
http://www.font2web.com/

Method 2 – Web fonts URL

If you are unable to download the fonts or the font has any legal permission required to use, then you can using web fonts by placing their URL or script.

Single font using <link> tag:

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular'>

Multiple fonts using <link> tag:

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Share|Ropa+Sans|Cuprum|PT+Sans+Narrow|Ubuntu+Condensed'>

Using @import method in CSS:

@import url(http://fonts.googleapis.com/css?family=Share|Ropa+Sans|Cuprum|PT+Sans+Narrow|Ubuntu+Condensed);

Using JavaScript:

WebFontConfig = {
  google: { families: [ 'Share::latin', 'Ropa+Sans::latin', 'Cuprum::latin', 'PT+Sans+Narrow::latin', 'Ubuntu+Condensed::latin' ] }
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

Check this: Google Web Fonts