Font Face do CSS3

Como usar a Fonte do Layout no Site

O sonho de todos os Designers Gráficos é usar as mesmas fontes que estão no layout no site, mas sempre tem aquele enorme porem, algumas das fontes são pagas, e então não se pode usar algumas das fontes no site. Mas claro, como isso se tornou um enorme problema, o nosso queridíssimo CSS3 veio com uma inovação que possibilite usar fontes externas no site, sendo ele o nosso magnifico @font-face.

Usando a @font-face

Vamos entender como funciona esse font face, você deve ter o arquivo da fonte com uma dessas extensões, .TTF, .OTF, .WOFF, .EOT, que são as mais aceitas em todos os navegadores.

Para usar é simples, veja no exemplo:

@font-face {
	font-family: "Nome da Fonte";
	src: url("http://www.seusite.com.br/fontes/NomeDaFonte.eot"); /* para IE */
	src: local("NomeDaFonte"), url("http://www.seusite.com.br/fontes/NomeDaFonte.ttf");
	}

p { font-family: "Nome da Fonte"; }

Certo, vou explicar detalhadamente o que é cada uma das linhas.

O Font Family sera o nome da fonte externa que usaremos;
Em Seguida temos o src da fonte, onde colocamos o caminho da fonte, como vemos, o formato .eot tem uma aceitação maior pelo IE
Logo abaixo temos um local(), que isso ira verificar se o usuário possui a fonte em seu computador, assim podendo usa-la do computador do usuário, não tendo a necessidade de fazer o carregamento do arquivo das fontes externas no seu site, e logo ao lado temos o caminho da url caso o usuário não possua a fonte no seu computador, e então ele fará o carregamento da fonte e exibira no site.

Você pode usar de varias formas as fontes, usando as propriedades do font-weight, assim no caso de uma fonte com família muito grande, você coloca estilos, ficando desta forma:

@font-face {
	font-family: "Nome da Fonte";
	src: url("http://www.seusite.com.br/fontes/NomeDaFonte.eot"); /* para IE */
	src: local("NomeDaFonte"), url("http://www.seusite.com.br/fontes/NomeDaFonte.ttf");
        font-weight: bold;
        font-style: italic;
	}

p { 
    font-family: "Nome da Fonte"; 
    font-weight: bold; 
    font-style: italic; 
}

Caso prefira, também podemos usar a opção do Google Fontes, que disponibiliza milhares de fontes para que você use-as no seu site, lá tem um tutorial certinho de como usar. Clique aqui para ir ate lá.

E então, o que achou ? Gostou, não gostou, deixe um comentário aqui em baixo, tire suas dúvidas.

[contact-form-7 id=”399″ title=”Form”]