Page 46 - Locaweb - Edição 33

designweb_fontes
46 locaweb
permite que você utilize fontes que
não estão instaladas no computador
do usuário, abrindo assim um leque
gigantesco de possibilidades. Basta,
para isso, manter o arquivo da fonte
disponível no servidor para que o
navegador do usuário reconheça,
acesse e use em tempo real o arquivo
source da fonte. Dessa forma,
especifica-se no CSS o nome e o
caminho do arquivo da fonte. Não é
necessário nenhum outro recurso, do
tipo “gambiarra”, como o javascript ou
SWF externo.
Utilize o @font-face
Alguns sites como o Typekit (http://
typekit.com) e o Font Deck (http://
fontdeck.com) disponibilizam esse
serviço de forma paga, hospedando
uma grande variedade de fontes em
seus servers. A Google também lançou
o seu próprio serviço de Web Fonts
( http://google.com/webfonts), que é
gratuito, mas possui poucas opções.
Você pode utilizar esse recurso sem
depender de nenhum serviço adicional.
Para isso, basta possuir o arquivo da
fonte desejada e disponibilizá-la em
seu servidor. Um bom site para buscar
fontes gratuitamente é o daFont
( http://dafont.com) . Nem sempre
todos os navegadores suportam um
mesmo formato de arquivo de fonte.
Um serviço que pode ajudar o seu site
a não ficar devendo nenhum formato
de arquivo para nenhum browser é o
Font Squirrel ( http://fontsquirrel.com/
fontface/generator), no qual você pode
fazer upload de um arquivo como
o True Type (TTF). Para que sejam
gerados os demais arquivos de fontes
que você precisa, como o Embedded
OpenType (EOT), Web Open Font
Format (WOFF) e SVG. Ao baixar
o pacote com as fontes geradas,
também acompanham arquivos
HTML e CSS com uma versão demo
da implementação. A seguir, um
exemplo de código CSS gerado pelo
Font Squirrel:
O @font-face
permite o uso
de fontes não
instaladas no
computador
do usuário,
abrindo um leque
gigantesco
Fine Typography: site oferece truques e macetes para usuários que trabalham com tipografia
@font-face {
font-family: 'nome-da-fonte';
src: url('nome-da-fonte-webfont.eot');
src: url('nome-da-fonte-webfont.
eot?#iefix') format('eot'),
url('nome-da-fonte-webfont.woff')
format('woff'),
url('nome-da-fonte-webfont.ttf')
format('truetype'),
url('nome-da-fonte-webfont.svg#')
format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: 'nome-da-fonte';
}
Para apps e páginas personalizadas
(ou compatíveis) com mobile, a Apple
informou sobre melhorias do iOS em
bugs na renderização de web fonts
e no suporte a fontes True Type pelo
Safari. Melhorias similares também
foram feitas no Android.
Cuidados
É importante ressaltar que, mesmo
com uma propriedade designada
para exercer tal função de maneira
mais simples e efetiva, o fator “tempo
de carregamento” deve ser levado
em consideração. Se temos uma
preocupação em “minificar” o arquivo
javascript para ganhar alguns kbytes
de vantagem no carregamento da
página, por que acrescentaríamos
mais algumas dezenas de kbytes extra
apenas para a visualização da fonte?
Tudo tem de ser previamente estudado
em diversos pontos. Seu site tem
milhares de acessos e o foco está nas
funcionalidades? Talvez esta não seja a
melhor ocasião para utilizar uma fonte
diferente das padrões. Mas, se um dos
seus principais focos for o visual, como
o site de uma agência de publicidade,
portfólio ou outro do gênero,
definitivamente, não existirão mais
motivos para você não incrementar a
tipografia personalizada.