Aprenda a utilizar a propriedade @font-face

Cansado de utilizar as mesmas fontes nos seus projetos web? Então está na hora de conhecer a propriedade @font-face! Libere sua criatividade e explore todo o potencial da tipografia em seus sites!

Se você já trabalha há algum tempo na web, sabe como o uso de fontes era um grande problema. Para fugir das tradicionais Times New Roman, Arial, Georgia etc, era necessário o uso de imagens. Algum tempo depois, um recurso chamado sIFR que fazia uso de Flash chegou para ajudar, mas não de maneira satisfatória.

Hoje, felizmente, os tempos são outros e temos alguns recursos muito interessantes à nossa disposição como: @font-face, cúfon e Google Fonts. Neste tutorial você aprenderá a trabalhar com a propriedade @font-face e daremos algumas dicas importantes sobre onde encontrar boas fontes de uso livre!

Propriedade @font-face

Quando o visitante chega a uma página que possui uma fonte exibida com @font-face, o browser é orientado a procurar pela respectiva fonte na máquina do usuário. Se a fonte não for encontrada, ela será baixada para o computador do visitante, utilizando o endereço fornecido pela propriedade @font-face. Geralmente esse endereço é uma pasta no próprio site.

Aquí vale uma observação importante: verifique se a licença da fonte que você deseja utilizar permite o download para a máquina do visitante. O uso indevido pode ocasionar problemas com os detentores dos direitos autorais.

Font Squirrel

Apesar do alerta sobre direitos autorais, vamos lhe dar uma dica quente sobre onde encontrar fontes free e evitar a dor de cabeça! O site Font Squirrel possui uma enorme coleção de fontes com uso liberado para @font-face. E não pára por aí, lá você também tem a opção de gerar pacotes chamados @font-face Kits que contém todos os formatos disponíveis para os diversos navegadores, assim como as instruções em CSS para sua aplicação. Vamos mostrar a seguir como isso funciona.

Como criar um Kit @font-face

Acesse o site Font Squirrel e selecione uma fonte de sua escolha. Em nosso exemplo, vamos escolher a primeira da lista: ST Marie. Agora, clique na opção @font-face kit, conforme mostrado na imagem abaixo.

@font-face-kit

O próximo passo é configurar o nosso kit. Primeiramente, seleciona no campo “Choose a Subset” a opção Don´t Subset. Essa opção tem por objetivo tornar o kit mais leve retirando algumas opções de acentuação. No nosso caso, queremos todos os acentos.

configuração do Kit de fontes

Você verá também 4 opções de extensão de fontes selecionadas – são elas:

  • TTF (esta extensão é aceita pela maioria do browsers, exceto IE)
  • EOT (já esta é a única extensão compatível com IE)
  • WOFF (formato novo)
  • SVG (extensão para iPhone e iPad)

É importante deixar todas elas marcadas a fim de garantir que a nossa nova fonte funcionará perfeitamente nos mais variados browsers e dispositivos móveis.

O passo final é fazer o Download do Kit.

Conteúdo do Kit

No arquivo .zip você encontrará o seguinte:

  1. Arquivo demo.html contendo uma demonstração do uso da fonte (pode ser descartado)
  2. Arquivo stylesheet.css (pronto para ser utilizado em seu projeto)
  3. Diversos arquivos de fontes (versão normal, em itálico, negrito etc)

Vamos abrir o arquivo css e entender como ele funciona. Confira abaixo:

stylesheet.css

Conforme mostrado acima, temos o nome da fonte na primeira linha (que pode ser modificado caso deseje) e temos o endereço dos arquivos de fonte logo abaixo.

Também vemos que o css também nos traz as diversas opções de Bold ou negrito, Itálico e assim por diante. Caso não queira ou não vá utilizar essas opções, fique à vontade para apagá-las, assim como os seus respectivos arquivos.

Utilizando a nova fonte

Para aplicar a nova fonte em um projeto de web, é fácil. Salve o arquivo stylesheet.css no mesmo diretório do seu projeto. Ou se preferir, copie o conteúdo para o arquivo .css de seu site (evitando assim ter que fazer link para mais de uma folha de estilo).

No cabeçalho do seu arquivo html, ou seja, dentro do “< head >”, crie o link para a folha de estilo contendo as instruções @font-face.

Certifique-se de que os respectivos arquivos das fontes também sejam salvos dentro da pasta onde se encontra seu site. E não se esqueça de atualizar o caminho para os arquivos, caso tenha feito modificações na estrutura das pastas.

Pronto! Com tudo no lugar, agora basta especificar na folha de estilo css o nome da nova fonte e ela será utilizada no site. Confira o exemplo abaixo.

Uso da font-face

Conclusão

Como você pode preceder, não tem segredo na utilização da propriedade @font-face! Então não perca tempo e comece hoje mesmo a trabalhar a tipografia de seu site com maior elegância.

Se ficou alguma dúvida, fique à vontade para escrevê-la nos comentários e teremos o maior prazer em responder! Um grande abraço e até a próxima.

6 Comentários

  1. Camila

    Obrigada Ubiratan, esse post me ajudou a resolver o problema de acentuação da fonte TITILLIUM TEXT que eu estava tendo no @fontface. Está opção Choose a Subset eu não conhecia.
    Obrigada e parabéns pelo site! Sucesso sempre!

    Responder
  2. Rafael

    Perfeito Ubiratan…. Muito bom, não sabia como arrumar a acentuação em um template que comprei que continha o @font-face – Então baixei novamente o kit com opção “No Subseting” – substitui a codificação css para o @font-face e funcionou perfeitamente….. Maravilha!!!! Obrigado!

    Responder

Deixe uma Resposta

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2017 Mochileiro Digital.

Compartilhe: