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:

font-family: "Arial", Times, Calibri;

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:

@font_face{
font-family: 'Ubuntu';  /*Definindo a família*/
src: local('../fonte/Ubuntu-C_0.TTF'), url('../fonte/Ubuntu-C_0.TTF') format('truetype-aat'); 
}

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:

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:

body{
font-family: "Ubuntu";
}

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