31 de dezembro de 2009

usando o @font-face

como falado no twitter eu comecei a usar o @font-face, uma linha do css que permite usar outras fontes que não estejam instaladas no computador do usuário.

mas para usar o @font-face existem alguns cuidados a tomar.

na declaração do font-family você não pode simplesmente colocar a fonte do @font-face e mais nenhuma, porque os arquivos de fontes são grandes para a internet e nem todos os browsers suportam  o @font-face.

no firefox, por exemplo, primeiro aparece o texto com uma fonte instalada no seu computador, depois de baixar a fonte, o texto aparece com os parâmetros do @font-face (no chrome e no safari, ele só renderiza o texto depois de baixar a fonte, o internet explorer só mostra a página depois de baixar a fonte – mais detalhes aqui).

o que eu fiz

via twitter, o kernest avisou que tinha adicionado a pt sans, uma fonte para a web e de graça. gostei dela e decidi testar o serviço, já sabendo dos problemas.

o serviço do kernest é bem fácil de usar, porém ele não funciona para internet explorer (ao menos não com a pt sans) e como eu sei que o @font-face no ie é meio bugado, eu prefiro que fique desse jeito mesmo.

com o auxílio do font matrix (uma tabela das fontes que vem instaladas no windows, mac, office e nos softwares da adobe) e do font friend (um bookmarklet, ou seja, um aplicativo em javascript armazenado em uma url que te ajuda a testar fontes numa página) para escolher umas fontes que já venham instaladas no computador do usuário e que tivessem as mesmas medidas da pt sans e não alterassem muito a aparência do blog.

meu parametro foi que as linhas e palavras continuassem onde elas estão (deixando de lado o desenho das fontes), ou que a mudança fosse muito pequena, para que caso a fonte mudasse de repente (como acontece no firefox) você não se perdesse no meio da leitura.

por isso eu escolhi a candara, uma fonte do novo time cleartype da ascender para usuários do windows e a optima para usuários mac (se você tiver o font friend no seu browser pode testar essas fontes na página).

já mexeu com @font-face? tem algo a acrescentar? qualquer coisa comente!

Posted via web from impreciso