Fontes personalizadas em seu site com @font-face

[ads2]

Olá pessoal. Em projetos WEB de sites, portais, etc. a fonte do texto é algo muito importante, que contribui para a beleza do layout e o deixa amigável. Entretanto, o que muitos não sabem é que as fontes que vemos nos sites, na maioria das vezes, são fontes que estão em nosso computador.

Quando o desenvolvedor vai definir a família de fontes no CSS, ele faz o seguinte:

Quando o navegador interpreta o CSS, ele busca no computador a primeira fonte informada, se ela não existir ele busca as próximas sucessivamente. Mas o que acontece quando nenhuma das fontes existe na máquina? – Boa pergunta… Nesse caso é mostrada a fonte padrão de cada navegador, assim como quando não definimos nenhuma fonte.

Usando @font-face

Mas se você quer usar fontes bacanas nos seus projetos, sendo que provavelmente a maioria dos visitantes não tenham essa fonte no computador ou dispositivo, você pode usar a propriedade @font-face do CSS. Onde a fonte ficará salva no seu servidor e será usada a partir de lá. Vejamos:

Para começar, depois de ter escolhido a fonte que deseja usar, faça o upload dela para uma pasta do seu servidor, de preferência para uma pasta chamada fontes;

Sugiro o uso da fonte Ubuntu, faça download aqui.

Depois adicione o seguinte código no início de seu arquivo CSS:

Agora vamos entender um pouco o que acontece, e que o código representa:
Na linha 1 é declarada a regra, na 2 declaramos qual será o nome da fonte, que poderá ser usada posteriormente em qualquer parte do documento;
Na linha 3 apontamos o local da fonte e o formato, veja abaixo a tabela de formatos:

Tipo da Fonte Formato Extensões
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Bom, depois disso, você pode usar esta fonte em qualquer div, class ou elemento do seu css, que ela funciona normalmente, ou então pode defini-la para todo o documento:

É isso ai galera, até a próxima!
[ads1]

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Deixe uma resposta

Seu e-mail não será publicado.