MangaCode - Desenvolvimento & Cursos Web

CSS3

Utilizando propriedade @font-face para fontes externas no CSS

  • Autor: Bernardo Corrêa
  • Publicado em: 02/10/2018 15:24h
  • Visualizado por: 719 pessoas

Opa, Bernardo aqui! Você já ouviu falar de uma propriedade do CSS chamada @font-face? Sabe como usar e qual a importância dele para a estilização do seu projeto? Pois então vem comigo que eu vou te mostrar tudo isso nesse post.

Bom, o @font-face é uma propriedade do CSS responsável por carregar fontes externas para o seu projeto, seja ele um site ou um sistema web. Isso você já deve ter imaginado, né? Pois é, mas o que são essas fontes externas?

Fontes externas são fontes que não estão presentes ou instaladas na máquina do usuário que está acessando o seu projeto. Famílias como Arial, Times New Roman, Calibri, são fontes que estão presentes na grande maioria dos computadores e sistemas operacionais do mercado, portanto, se seu projeto utiliza estas fontes, provavelmente você não terá problema de visualização do seu projeto.

O principal fator que favorece o uso de fontes externas em nossos projetos é o fato de podermos definir uma personalização a mais, possibilitando escolher fontes mais bonitas, elaboradas e que se relacionem melhor com o nosso Design. Isso tudo na maioria das vezes não é possível fazer com fontes padrões. 

Alguns iniciantes em desenvolvimento web baixam e instalam fontes externas em seus computadores e as definem em seus projetos utilizando somente a propriedade font-family, veja o exemplo:

.font-open-sans {font-family: Open Sans}

Quando este desenvolvedor executar o projeto em sua máquina, ele não terá nenhum problema na visualização da fonte externa definida. Porém, quando este projeto for publicado na Web, todos os usuários que navegarem no projeto e não tiverem a fonte instalada em suas máquinas, não terão a mesma experiência de exibição que o desenvolvedor teve. Isso acontece por quê? Porque a fonte externa não foi definida corretamente no CSS do projeto!

E é aí que entra o @font-face!

Como falei anteriormente, o @font-face carrega fontes externas em seus projetos, independente se elas estão instaladas ou não no computador de quem está acessando. Basicamente é como se ele “forçasse” uma instalação no browser do usuário e exibisse na tela, legal né? 

Mas para que isso aconteça, é necessário que você publique suas fontes juntamente com o projeto. Normalmente os desenvolvedores criam uma pasta chamada fonts e colocam todas as fontes externas nela. Veja um exemplo de como “chamar” suas fontes no CSS e utilizá-la em seu seu projeto:

@font-face {
   font-family: Open_Sans;
   src: url(fonts/open_sans.ttf);
}

@font-face {
   font-family: Roboto_Sans;
   src: url(fonts/roboto_sans.ttf);
}

.font-open-sans {font-family: Open_sans;}
.font-roboto-sans {font-family: Roboto_sans;}

O que aconteceu acima foi o seguinte: Eu criei uma pasta fonts, coloquei duas fontes chamadas open_sans.ttf e roboto_sans.ttf, e depois fiz a chamada no CSS utilizando o @font-face. Com essa base pronta, eu criei duas classes que chamam exatamente cada uma das fontes definidas. Posso chamá-las no meu HTML dessa forma:

<h2 class="font-open-sans">Texto com Open Sans</h2>
<h2 class="font-roboto-sans">Texto com Roboto Sans</h2>

Com isso, meu querido, o resultado fica incrível, veja só:

Então é isso ai! Agora você já sabe como utilizar o @font-face e definir fontes externas nos seus projetos da maneira correta. Se você gostou, não esquece de compartilhar e deixar o seu comentário abaixo, além de me ajudar, vai ajudar muita gente com esse problema por ai!

Forte abraço!