Como usar a propriedade @font-face?

13 anos atrás

3 minutos

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

view source
print?
1 &amp;lt;h1&amp;gt;Exemplo de aplicação do @font-face&amp;lt;/h1&amp;gt;
2 &amp;lt;p&amp;gt;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.&amp;lt;/p&amp;gt;

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

1    @font-face {
2    font-family: 'robotoregular';
3    src: url('roboto-regular-webfont.eot');
4    src: url('roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
5         url('roboto-regular-webfont.woff2') format('woff2'),
6         url('roboto-regular-webfont.woff') format('woff'),
7         url('roboto-regular-webfont.ttf') format('truetype'),
8         url('roboto-regular-webfont.svg#robotoregular') format('svg');
9    font-weight: normal;
10    font-style: normal;
11}

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:

view source
print?
1 h1 {
2     font-family: 'robotoregular';
3     font-size: 50px;
4 }

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. 😉

Metamídia

Ajudamos empresas a ter mais visibilidade para seu negócio, entender melhor seus clientes e trazer mais resultados. Trabalhamos com Otimização de Sites (SEO) e campanhas de conversões.