CSS Tips

How to use CSS @font-face

You can use font directly on Web pages no need create images for different styles. @font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools. Just copy past font files on your root directory and open your style sheet insert few line code.

Create @font-face for BRITANIC.

@font-face {
    font-family: 'BRITANIC';
    src: url('fonts/BRITANIC.eot');
    src: local('?'), url('fonts/BRITANIC.woff') format('woff'), url('fonts/BRITANIC.ttf') format('truetype'), url('fonts/BRITANIC.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

Assign BRITANIC through font-family.

Body {
    font-family: "Conv_BRITANIC", Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    font-size:17px;
}

@font-face browser support 

EOT - IE6, IE7, IE8,
TTF - Safari, Chrome, Firefox, ,Opera
OTF - Safari, Chrome, Firefox, ,Opera
IOS - 3.1 supports SVG
WOFF - IE 9, Chrome, Firefox

Online @font-face Converter

http://www.font2web.com/

http://www.fontsquirrel.com/fontface/generator