@font-face

A propriedade @font-face permite que usemos famílias de fontes que não estão instaladas no computador do usuário. Estamos acostumados a usar (os designers que o digam) um pacote de fontes muito limitado de fonts.
O @font-face faz com que o browser baixe, instale e renderize uma font na página.
Nem preciso falar que isso pode deixar o site um pouco mais lerdo. Outro ponto é que nenhum dos browsers tem suporte para isso hoje.

Veja um exemplo:

@font-face { font-family: Nome da Fonte, Verdana, Arial, Tahoma, Sans-Serif; src: url(enderecodafonte); }

Existem outras maneiras usando flash. Acontece que a página fica lerdíssima dependendo de quatno texto o camarada aplicou a técnica. Para mim é uma manobra muito trabalhosa.

Links para visitar:

19 Comentários

Inside 10/08/2007 às 18:42

Eu uso a opção do flash quando preciso, mas claro que sempre com cautela, pra não pesar o site demais…

[]‘s

Alexandre 10/08/2007 às 19:58

A “opção em Flash” chama-se sIFR.

Rodrigo Fante 11/08/2007 às 05:09

Eu tinha lido isso no Digital Web, mas realmente me parece bastante trabalhoso.

Eu uso sempre as fontes padrao, raras e poucas vezes coloco uma imagem ou recorro ao recurso do flash.

Cristian Trentin 12/08/2007 às 16:47

Dependendo do caso não é melhor usar uma img?

Cristian Trentin 12/08/2007 às 16:48

Mas mesmo assim acho que o layout de um site não pode ficar limitado ao tipo de fonte utilizado.

Carlos Eduardo 13/08/2007 às 11:20

Esse recurso, infelizmente, ainda não é aceito.
Mas creio que será de grande ajuda quando for…

Claro, deverá ser utilizado em casos muito específicos, justamente para não tornar o site muito pesado.

Assim como o download de fontes “extras”, considero que o recurso do flash para exibição de fontes “não-oficiais” deva ser utilizado em casos nos quais seja extremamente necessário e que realmente tenha relevância para o aspecto visual do site ou, até mesmo, sua interação por parte do usuário.

Aqualung 13/08/2007 às 14:59

Imagem + valores em “em” + um “alt” com o texto “igual” a imagem.
É uma boa!
[]‘s

Helder Santana 13/08/2007 às 15:46

Quanto aos heads, podemos colocar fontes através desse script:

http://www.stewartspeak.com/projects/dtr/

Ele usa o componente gerador de png que vem com o php.

O bom é que ele não afeta sua marcação.

E seu código ainda continua acessível.

VitorGGA 13/08/2007 às 15:55

“Outro ponto é que nenhum dos browsers tem suporte para isso hoje.”
Muito útil! Vishhhhh como é…

nicholas 14/08/2007 às 10:36

Vamos supor que um dia os borwser deem suporte a isso… Além de eu considerar uma tecnica um tanto que intrusiva (raios, ela instala uma fonte na maquina do usuario!) ainda tem o problema do usuario leigo, restrições de browser e afins.

Será que o cara que entrar no meu site super bem desenhado vai querer instalar a fonte XPTO só para ver o puta trabalho que fiz ou vai procurar o conteudo que interessa a ele? Aí vamos ter q começar a pensar em layouts onde o usuario não quis instalar a fonte!

Vitor 14/08/2007 às 12:38

Muito interessante que existe isso. Porém inútil, visto que não é possível usar hoje e nem nos próximos anos…
Talvez em um futuro bem distante…

Daniel Accorsi 16/08/2007 às 17:59

Eu não concordo muito com isso também não. Masss, não adianta “tacar” pedra. QUANDO ficar disponivel essa funcionalidade, poderiamos usar, em certos casos, outros não. A questão é: ele não veio para substituir flash, imagem ou componentes php, veio só para somar.

Abração.

Fábio dos Santos 24/08/2007 às 01:22

Talvez depois. No momento não é possível.

Tigo di 24/08/2007 às 23:06

A regra @font-face (não é propriedade) funcionava com arquivos eot (Embedded Open Type) e ainda funciona para quem ficou com as atualizações do windows paradas há um bom tempo.

A atualização que barrou a importação desses arquivos de fontes por motivos de segurança foi essa: http://www.microsoft.com/technet/security/bulletin/MS06-002.mspx

Essa regra, em sua especificação, parece aceitar qualquer arquivo de fonte. Isso seria bom, seria um opcional no dia-a-dia mas prefiro usar a técnica de image replacement de Gilder/Levin por ser obviamente mais simples e dar menos trabalho para o browser.

Bom, falei do Win… não tenho idéia de como fica a importação de fonte em outros sistemas operacionais.

Lúcio Kleber 27/11/2008 às 09:28

Pessoal, os tempos mudaram e a coisa está rolando bem e com técnicas/manobra até para IE6 / 7 / Safari 3, eu vou me aprofundar melhor no assunto e depois eu volto para contar a experiência, acho que vocês podem fazer o mesmo!

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

Abrax

Boas práticas de Desenvolvimento com Padrões Web

Leia também: