Um assunto que causa muita discussão ainda hoje é sobre o uso de fontes externas em nossos projetos web, eu mesmo demorei para acreditar na funcionalidade disso e agora vou explicar porque passei a usar (com cuidado!) o @font-face.
Breve introdução
A propriedade @font-face permite o uso de fontes externas em seus projetos web. Basicamente é isso, porém, existe algumas coisas a ser lembradas no uso de tal comando.
Precisamos ter a fonte hospedada em algum servidor, normalmente no próprio diretório ou em algum serviço que disponibilize a fonte (falarei em breve).
Existem algumas extensões para fontes e cada uma é suportada de maneira diferente por browsers diferentes.
Veja maiores explicações no site do w3c
Usando as fontes
Algo que devemos prestar atenção é no uso das fontes. Saber se a fonte é paga ou gratuita, se é permitida o compartilhamento dela, enfim. Vamos imaginar que você está usando uma fonte paga e faz o upload dela em seu servidor, logo, ela está sendo disponibilizada para o mundo todo, e você, sim… é o responsável.
Você pode encontrar fontes gratuitas em sites por ai, de momento não indicarei nenhum, é algo simples de encontrar.
Extensões de fontes
Segundo o site fontsquirrel, temos as seguintes extensões:
TrueType Fonts para Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts para Internet Explorer 4+
WOFF fonts para Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts para iPad and iPhone
Funciona mais ou menos assim, se tivermos todas as extensões disponíveis, teremos compatibilidade em todos os browser (pelo menos os citados acima).
O site fontsquirrel, já citado, se dedica a compartilhar todas as informações necessárias para você usar em seu site o @font-face.
Você pode facilmente usar um gerador que existe no próprio site e “transformar” uma fonte em varias extensões.
Veja em: http://www.fontsquirrel.com/fontface/generator
Exemplo de uso
Escolhi uma fonte qualquer no site do fontsquirrel e vamos ao que interessa, o uso.
Acesse o link http://www.fontsquirrel.com/fonts/PT-Sans e acompanhe no post.
Clique na aba “@font-face Kit”, você vai encontrar algumas opções e o botão para download. Baixe o conteúdo (.zip).
Observe os arquivos:
demo.html > Contem o exemplo de uso no html.
h1.fontface {
font: 60px/68px 'PTSansRegular', Arial, sans-serif;
letter-spacing: 0;
}
<h1 class="fontface">Font-face Demo for the PT Sans Font</h1>
stylesheet.css > a propriedade @font-face.
@font-face {
font-family: 'PTSansNarrowRegular';
src: url('PTN57F-webfont.eot');
src: url('PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTN57F-webfont.woff') format('woff'),
url('PTN57F-webfont.ttf') format('truetype'),
url('PTN57F-webfont.svg#PTSansNarrowRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Repare que foi adicionada a fonte PTSansNarrowRegular (no arquivo existe outras). Ela foi adicionada em todas as extensões, para funcionar nos browsers que cada uma suporta. A propriedade font-family dá o nome a fonte, para que você possa chama-la em seu CSS.
.texto_ex {
font-family: 'PTSansNarrowRegular';
}
Vamos colocar a fonte Arial como “reserva” caso ocorra algum erro, ou o font-face não encontre a fonte no servidor. Exemplo:
.texto_ex {
font-family: 'PTSansNarrowRegular', Arial, sans-serif;
}
Os outros arquivos são as fontes em suas diversas extensões, e você deve hospeda-los no mesmo local em que o css (stylesheet.css) está, ou faça o caminho da pasta onde a fonte se encontra.
Dica: Google font
O Google disponibiliza um acervo de fontes para uso na web, acho bem legal e me baseio atualmente por lá, antes de iniciar algo com uma fonte diferenciada procuro lá algo que possa me interessar.
No site você pode testar, gerar código e muito mais, vale a pena conferir e claro, TESTAR.
Link Google Font
Não achei que falei “Tudo” como foi dito no titulo, então, me ajude comentando com conteúdo adicional ao post!
Acho que é isso, abraço!
Ajudou bastante!