CSS 3 com font-face compatível, saiba como usar e converter suas fontes

Há muito tempo nós Web Designers sonhamos em poder utilizar qualquer tipo de fonte em nossos sites, a funcionalidade @font-face do CSS 3 veio para cumprir esse maravilhoso recurso com classe, de forma simples e compatível.

Veja como utilizar a propriedade @font-face de forma compatível com os principais navegadores do mercado.

De forma simples podemos generalizar o uso dessa função da seguinte maneira:

1.@font-face {

2.font-family: 'BankGothicMdBTMedium';

3.src: url('bankgthd-webfont.ttf') ;

4.}

5..elemento { font-family: 'BankGothicMdBTMedium'; }

Com isso você estará utilizando a fonte Bank Gothic no elementado de classe "elemento".

Agora vamos vamos mais a fundo nesse propriedade deixando mais compatível.

Essa fonte utilizada tem como extensão .ttf, ou seja, é uma fonte do tipo truetype. Esse tipo de fonte é compatível com alguns navegadores no mercado, porém navegadores como o IE não consegue ler essa terminação. Para o IE utilizamos fontes do tipo .EOT.

E caso o usuário já tenha essa fonte no computador, é preciso baixar novamente? Não, vamos ver agora como seria o código completo para termos total flexibilidade e compatibilidade com essa função:

1.@font-face {

2.font-family: 'BankGothicMdBTMedium';

3.src: url('bankgthd-webfont.eot');

4.src: local('BankGothicMdBTMedium'), url('bankgthd-webfont.woff')format('woff'), url('bankgthd-webfont.ttf') format('truetype'),url('bankgthd-webfont.svg#webfontMYjN7z0O') format('svg');

5.}

6..elemento { font-family: 'BankGothicMdBTMedium'; }

Dessa forma temos total compatibilidade com os navegadores mais populares do mercado. Não se assuste com o código apenas vá nesse site e envie sua fonte que ele converte para .EOT e gera todo o código necessário automaticamente!

Converter fontes para .EOT e gerar código @font-face compatível

Conheça o @font-face Generator e converta suas fontes.

fonte : http://www.leomiranda.com/dicas-css/css-3-com-font-face-compativel-saiba-como-usar-e-converter-suas-fontes.html