Fontes personalizadas no seu site com CSS – Parte II

• Home-
• CSS/
• autor: Adriano Meira /
• publicado em: 21/04/2012

Olá Pessoal algum tempo atrás eu falei sobre como colocar fontes personalizadas nos eu site usado a biblioteca Cúfon, e agora vou mostrar um pouco sobre um atributo em CSS que pode lhe ajudar a fazer isso com menos esforço e códigos.

Um dos grandes desafios para a produção de um site é que ele funcione nos diversos navegadores de forma uniforme, ou seja não dê problemas ou “quebre”, outro grande desafio que está ligado a isso é usar fontes personalizadas de forma mais simples e fácil. Para isso podemos utilizar uma propriedade chamada @font-face, com ela podemos instalar fontes direto no servidor onde o seu site está hospedado e fazer com que ela seja exibida nos navegadores sem o uso de javascript ou flash.

Com isso podemos então botar a mão na massa e ver como funciona, primeiramente você deve achar uma boa fonte existe vários sites que disponibilizam fontes grátis e pagas, mais abaixo vou falar sobre direitos autorais de fontes.

Com a fonte em mão coloque-a em uma pasta ou na raiz do seu servidor para nosso exemplo vou usar a fonte Loopi você pode baixa-la no site www.dafont.com de forma gratuita.  Neste exemplo vou coloca-la dentro da pasta “fontes”, assim minha estrtura de pastas fica:

fontes/Loopi.otf
index.html

No CSS do arquivo index.html (ou na sua folha de estilo o arquivo.css) você deve “chamar” a fonte com o seguinte trecho de código:

@font-face {
    font-family: Loopi;
    src: url(fonte/Loopi.otf);
}

Com isso sua fonte está instalada no seu site, o atributo font-family determina o nome que você quer dar a sua fonte, você pode chamar como quiser, mas se for um nome composto deve-se usar aspas, por exemplo se a fonte se chama Henry Morgan Hand logo o atributo de font-family deve ser “Henry Morgan Hand“.

E por fim é só colocar no seu seletor a família de fonte que colocou o seu site, assim:

h1{ font-family:Loopi, sans-serif; }

Note que eu coloquei mais uma fonte, ou seja se a fonte não for carregado (Loopi) qualquer fonte Sem toSerfa, como Verdana ou Arial, será colocada no lugar, também temos outros atributos no fonte face,veja este exemplo:

@font-face {
    font-family: Loopi;
    src: url(fonte/helvetica.otf);
    src: local(helvetica.otf);
    font-weight: 400;
}

Aqui determinamos que se fonte no servidor não for carregada o navegador vai buscar no sistema do usuário a fonte e ainda coloca-la em negrito, o valor de 400 é um valor dentre os que este atributo tem que vão des de 100 a 900, normal, bold e outros,veja aqui mais sobre este atributo.

Bem bacana não, agora fique esperto em algumas dicas abaixo para que possa dar tudo certo no seu site.

Formatos de fontes aceito

Tipagem	Formato da Fonte	Extensão da fonte
“truetype”	TrueType	.ttf
“opentype”	OpenType	.ttf, .otf
“truetype-aat”	TrueType with Apple Advanced Typography extensions	.ttf
“embedded-opentype”	Embedded OpenType	.eot
“svg”	SVG Font	.svg, .svgz

Compatibildiade

Aqui vai uma boa notícia os navegadores Internet Explorer na versão 7, 8 e 9 aceitam o @font-face porém apenas as extensões EOT, você pode achar vários conversores on-line e eu recomendo este da Font Squirrel que converte em um punhado de formatos para  web, já os navegadores Safari, Firefox, Crhome e Opera aceitam fonts em TFF e OTF.

Direitos Autorais da Fonte

Aqui uma dica muito importante, nem toda fonte na internet é de graça, você deve ficar atendo a licença da fonte pois isso pode acarretar para seu projeto sanções jurídicas sobre o uso da fonte, por isso sempre de uma conferida nos arquivos da fonte que baixar que em geral tem um aquivo em TXT que mostra o tipo de licença dela, mas nada impede de você comprar a fonte e usa-la veja nos sites associados da Da Font onde comprar.

Onde achar fontes bacanas de graça

Existe vários sites de fontes por ai, eu recomento dois deles para poder baixar fontes, um é o dafont.com onde você poderá filtrar o tipo de fonte não apenas pelo tipo (caligráfica, serifada, display, etc..) como pelo tipo de licença, veja que na busca tem um link escrito “More Options” ai você pode colocar fontes free, além de poder escrever um trecho do seu texto para ir testando a fonte.

Outro ótimo repositório de fontes com  licença gratuita é o próprio Google que tem em seu projeto de Google Web Fonts uma enorme biblioteca de fontes onde você pode não só baixar como usa-las onde line uma verdadeira API de fontes ao estilo Google, aqui você vai poder escolher o tipo de fonte entre escritas a mão, sem serifa, com serifa e display , apos escolher na barra azul logo em baixo você clica em “use” e vai ver um medidor de tempo de carregamento da fonte, tipo de negrito que ela suporta (font-weight), coloca-la sem instalar no seu servidor ou baixa-la no link acima do medidor.

Para maiores informações o Google também desenvolveu um hot-site sobre o assunto acesse http://www.font-face.com/ e veja mais detalhes sobre a técnica ou mesmo a Própria W3c que trata sobre o assunto.

Qualquer dúvida postem ai pessoal, até a próxima.

Fontes de pesquisa:
http://tableless.com.br/font-face-fonts-externas-na-web/
http://www.font-face.com/
http://www.google.com/webfonts

 

---

Tweet