Using non-standard font in Web UI

During Web UI development, IE gets on nerves. But few things can be fixed with work-around.

If you want to use non-standard fonts in your application, then following steps can help.

1) Download the font (otf or ttf file).

2) To make it work in browsers other than IE, put the following in your css file.

@font-face {
            font-family: 'Your Custom name of the font';
            src: url('fonts/.otf', format('opentype'));
}

body {
            font-family:'Your Custom name of the font';
}

OR

@font-face {
            font-family: 'Your Custom name of the font';
            src: url('fonts/.ttf', format('truetype'));
}

body {
            font-family:'Your Custom name of the font';
}

3) This won't work in IE because IE supports only 'eot' format. So you can convert the otf or ttf file to eot format using the converters. There are converters available online like http://www.font2web.com/

4) Now use multiple URLs to support it in multiple browsers.

For Example,

@font-face {
            font-family: 'Your Custom name of the font';
            src: url('fonts/.eot');
            src: local('☺'), url('fonts/.woff') format('woff'), url('fonts/.ttf') format('truetype'), url('fonts/.svg') format('svg');
}

Now, this can be used in IE. IE is more restrictive in terms of syntax, so do not forget to use the classification group of the font you are using.

For example,

body
{
            font-family:'Your Custom name of the font', Sans Serif;
}