Como usar a propriedade @font-face?

Olá, pessoal!

Infelizmente devido a falta de tempo demorei para escrever mais um post aqui no SEO Florianópolis enfim, vamos ao que interessa.

Minha amiga @lianebez, gostaria de usar uma fonte diferente em um de seus projetos WEB. Porém, ela andou pesquisando sobre o @font-face e não encontrou algo que a ajudasse, então decidi escrever este post pois mais pessoas podem ter esta dúvida. E aí, como usar a propriedade @font-face?

O Problema

Utilizar uma fonte que não é padrão do sistema, ou seja, não vem instalada na máquina com o Sistema Operacional e ser renderizada por todos os navegadores.

HTML


	<h1>Exemplo de aplicação do @font-face</h1>
	<p>O @font-face permite usar fonts que não sejam de sistema, ou seja, que não estão instaladas na máquina do usuário.</p>

Após escrever nosso HTML vamos usar o @font-face Kit Generator pois navegadores como Internet Explorer 7, 8 e 9 necessitam que a extensão da font seja EOT. Já o Firefox, Chrome, Safari e Opera aceitam fonts em TTF e OTF.

Usando o @font-face generator

Clique no botão Add font e espere o upload
Deixe a opção OPTIMAL selecionada
Habilite o checkbox Yes, the fonts I’m uploading are legally eligible for web embedding.
Após esses passos clique no botão Download Your Kit

Após concluir nosso download descompacte-o e abra o arquivo stylesheet.css copie o trecho do @font-face e cole no seu documento de CSS sempre tomando cuidado com o caminho das fonts. Vejamos um exemplo abaixo com a font Myriad CnSemibold.

CSS


	@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.eot');
    src: url('roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff'),
         url('roboto-regular-webfont.ttf') format('truetype'),
         url('roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

No CSS acima fizemos a chamada do @font-face, agora precisamos definir onde vamos trabalhar com essa font. Vejamos um exemplo sendo aplicada em um H1:


h1 {
	font-family: 'robotoregular';
    font-size: 50px;
}

Veja um exemplo do @font-face sendo executado.

Conclusão

O uso da propriedade @font-face, nos dá uma liberdade muito grande para trabalhar com diferentes fonts em nossas páginas, permitindo uma boa performance visual sem perder a acessibilidade de nosso conteúdo pois não necessita de imagens, flashs ou JavaScripts.

Importante! Procure não abusar desse recurso, muitos arquivos podem atrapalhar o carregamento de suas páginas.

Até a próxima. 😉

SEO Florianópolis

Artigos e Discussões sobre SEO