Tutorial - Como usar o font-face

Olá, pessoal :33

Tudo bem? Que saudades que 'conversar' com os leitores daqui ><' Tem um tempão que não apareço, não é? Me desculpem, não ando muito cumprindo compromisso com os dois blogs em que posto, além do meu. Prometo aparecer mais por aqui, ah, e que layout lindo, não é, pessoal? O Natsu se superou desta vez, ainda mais esse PSD, credo, fiquei com ciúmes u_u

Okay, chega das minhas retardatices. Eu estava sem o que postar aqui, e o Natsu me deu uma ideia de postar um tutorial de como usar o Font-face, eu adoro, e fica lindo, eu mesma uso no layout do meu blog. Consiste em usar fontes diferentes, que não estão no Designer do Modelo nem no Google Web Fonts, como a Bebas Neue, que será o meu exemplo. Eu espero que gostem, é só ler mais ^^

Esse é o print do resultado, para quem quer. Se seguir o tutorial exatamente como explico, sem mudar nada, a fonte será essa, mas pode colocar outras avá. Se você já tem a fonte em .ttf no seu computador pule para a etapa 3.

Gostaram? Primeiro é necessário ter a fonte no seu computador. Estará em arquivo .zip, com esse ícone:

1. Clique com o botão direito e depois em "Extract Here" ou "Extrair aqui":

2. Depois disso, você vai achar um arquivo com um símbolo parecido com esse, que é o em .ttf.

3. Agora é a parte do HTML. Vá nesse site e hospede o arquivo .ttf. Espere um pouco. Vai aparecer um link de repente, copie-o e cole em um bloco de notas, vamos precisar.

4. Vá no seu HTML é procure por ]]></b:skin>. Depois de achar, cole esse código logo acima:

@font-face {
font-family: 'Nome da Fonte';
src: url('link');
}

Em itálico é aquele link que você colou no bloco de notas no passo 3, e em negrito, e o nome da fonte. 

Aqui está o código para usar, caso queira a Bebas Neue:

@font-face {font-family: 'Bebas Neue';src: url('http://static.tumblr.com/z7rr9hy/HEwmj3rpd/bebas_neue.zip');}

Eu espero que tenham gostado u3u

Sayonara ~