Como anexar uma fonte em CSS

Neste tutorial, iremos lhes ensinar a anexar uma webfont em css. Um ótimo local para procurar webfonts legais é o Google Fonts.

Para funcionar o código, deve-se chamar o arquivo da fonte (open type ou true type) que está instalada em algum local do seu site ou outro servidor. Existem quatro tipos de fontes, que são trabalhadas de acordo com o navegador. Por exemplo, o IE não aceita automáticamente que se gere fontes com o formato ttf. Portanto, será necessário usar outro tipo, o eot (embedded-opentype).

Há outros formatos, como woff (para navegadores de celular) e svg (universal -exceto IE).

Vamos trabalhar no código CSS:

@font-face {
propriedades
}

Como se pode ver, este comando é diferente dos outros, pois geralmente eles começam com . (para elementos com classes "class") ou # (para elementos com indicadores "id"). A função de classes css que começem com @ é importar ou chamar algum arquivo.

Vamos agora, trabalhar na propriedade que irá chamar as fontes, com 4 exemplos:

Código:

@font-face {
font-family: <NOME QUE SERÁ DADO À FONTE>
src: url('www.meusite.com/minhafonte.eot'); /* FIX PARA IE */
src: url('www.meusite.com/minhafonte.ttf');
}


No caso acima, o navegador procurará apenas as fontes para IE e outros navegadores, sem realizar nenhum outro procedimento.

Código:

@font-face {
font-family: <NOME QUE SERÁ DADO À FONTE>
src: url('www.meusite.com/minhafonte.eot'); /* FIX PARA IE */
src: local('<NOME ORIGINAL DA FONTE>'), url('www.meusite.com/minhafonte.ttf');
}


Neste caso demonstrado, o navegador irá primeiro procurar a fonte no seu computador, e se não encontrar, vai capturar a fonte da url que foi designada.

Código:

@font-face {
font-family: <NOME QUE SERÁ DADO À FONTE>
src: url('www.meusite.com/minhafonte.eot'); /* FIX PARA IE */
src: local('<NOME ORIGINAL DA FONTE>'), url('www.meusite.com/minhafonte.woff'), url('www.meusite.com/minhafonte.ttf'), url('www.meusite.com/minhafonte.svg');
}


Aqui, além de pedir ao navegador para que se procure a fonte no computador antes de incorporar a fonte da url, são dadas mais opções, com os formatos svg e woff. Desta maneira, alguns navegadores que não possuem o suporte a incorporar o formato ttf, terão uma disponibilidade maior de fontes.

Código:

@font-face {
font-family: <NOME QUE SERÁ DADO À FONTE>
src: url('www.meusite.com/minhafonte.eot') format('embedded-opentype'); /* FIX PARA IE */
src: local('<NOME ORIGINAL DA FONTE>'), url('www.meusite.com/minhafonte.woff') format('woff'), url('www.meusite.com/minhafonte.ttf') format('truetype'), url('www.meusite.com/minhafonte.svg') format('svg');
}


Este é igual ao anterior, mas aqui facilitamos o trabalho do navegador determinando qual é o formato da fonte.

Veja os formatos de fonte que podem ser utilizados pelos navegadores:

Formato[/td]Extensões[/td]Truetype (Windows)[/td].ttf[/td]Opentype[/td].otf[/td]Truetype with Apple Advanced Tipography extensions[/td].ttf[/td]Embedded[/td].eot[/td]SVG Font[/td].svg[/td]WOFF Font[/td].woff[/td]

Tipo da fonte

'truetype'

'opentype'

'truetype-aat'

'embedded-opentype'

'svg'

'woff'

É possível definir o peso (se é negrito ou normal) e o estilo (itálico ou normal) da fonte, para ajudar o navegador:

Código:

@font-face {
font-family: <NOME QUE SERÁ DADO À FONTE>
src: url('www.meusite.com/minhafonte.eot') format('embedded-opentype'); /* FIX PARA IE */
src: local('<NOME ORIGINAL DA FONTE>'), url('www.meusite.com/minhafonte.woff') format('woff'), url('www.meusite.com/minhafonte.ttf') format('truetype'), url('www.meusite.com/minhafonte.svg') format('svg');
font-weight: normal;
font-style: normal;
}


Compatibilidade
Praticamente não existe problema de compatibilidade com os navegadores, mas, infelizmente, no meio de tudo tão correto, sempre tem um rebelde para fazer tudo ao contrário: O IE na versão 7, 8 e 9 só aceitam as fontes com formado EOT. Você pode encontrar qualquer conversor online e o problema se resolve. Eu aconselho usar o FontSquirrel: http://www.fontsquirrel.com/fontface/generator. Os outros navegadores, como Safari, Chrome, Firefox e Opera aceitam fontes no formato TTF e OTF.

Veja um exemplo

Fontes pagas
O maior problema no uso da propriedade @font-face é realmente o uso de fontes pagas. Usando esta propriedade você disponibiliza o arquivo no servidor para qualquer um que possa pegá-lo e baixá-lo. Se você usar uma fonte paga, disponível por copyright, o download desta fonte é proibido e você pode ser responsabilizado. Portanto, ao usar o @font-face, é recomendável que verifique se ela é gratuita antes. Ou utilize uma similar, pois fonts grátis é o que não falta.

Até a próxima!