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

Home

Criação de site com CSS

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:

@font-face {
 font-family: 'BankGothicMdBTMedium';
 src: url('bankgthd-webfont.ttf') ;
}
.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:

@font-face {
 font-family: 'BankGothicMdBTMedium';
 src: url('bankgthd-webfont.eot');
 src: local('BankGothicMdBTMedium'), url('bankgthd-webfont.woff') format('woff'), url('bankgthd-webfont.ttf') format('truetype'), url('bankgthd-webfont.svg#webfontMYjN7z0O') format('svg');
}
.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.

Posts Relacionados:

Solucionando dúvida de CSS com firebug

Conheça nosso desafio de CSS lendo esse artigo completo. ...

04/01/2013

Dominando quebras de linha pelo CSS

Veja como solucionar alguns problemas de quebras de linha na criação do seu site utilizando CSS. Irei mostrar duas tags para bricarmos com as quebra...

19/04/2010

Tags: CSS 3 Dica CSS Tutorial CSS

| Mais