29. Tutorial - @Font-Face

Oi gente! Tudo bem???? Bem, eu estou acordada desde ás 11h00 de terça feira até as 23h00 de quarta. Isso mesmo. Passei a noite de terça em claro por causa da minha linda e amada insônia. Ela ataca de vez em quando, mas nunca foi tão grande. Eu estava encarando teto, achando que eram apenas 2h00 da manhã ou coisa assim, mas aí o despertador da minha mãe tocou. Fiquei pensando: "Ué, mas o despertador só toca ás... 6h00!" e então percebi que estava acordada desde das 11 da manhã de terça feira.

Ontem eu fui na casa da minha friend Sabrina, e ela chamou a nossa friend Bella. A gente assistiu umas cenas e ouviu umas músicas do filme Sweeney Todd, que eu falei no post anterior. Depois ficamos umas trezentas horas falando sobre o que vai acontecer quando o boi entrar em extinção. Papo de louco. Aí a gente tava pesquisando umas fotos no Tablet da Sabrina de castelos assombrados e de repente, voltamos cinco anos no tempo e brincamos de detetive. Não o jogo de tabuleiro, aquele tipo real. Eu era a agente Rachel Caroll, do F.B.I., a Sabrina era a detetive Kate da Scotland Yard (a polícia de Londres) e a Bella era a investigadora Winchester, da C.I.A. Não usamos primeiros nomes, por isso só sei o meu.

E passei terça-feira inteira fazendo layouts. Fiz 3 no total, mas não se animem, porque nenhum deu certo! Fiz um vintage, um super moderninho e um do Harry Potter, mas toda vez entrava um bug ou não-sei-o-quê no meio do código e bloqueava a edição de gadgets e saía com umas letras todas feiosas, nada a ver com os @Font-Face que eu fiz.

Por falar em @Font-Face... hoje vou ensinar vocês a usarem o @Font-Face e a fazerem seus próprios @Font-Face.

Caraca! Olha o tamanho da introdução, gente do céu. Bem, vamos logo com isso antes que eu me esqueça do que eu tava falando.

1. Primeiro vá nesse site e baixe a fonte que mais gostar. A minha vai ser essa:

Pra quem quiser baixar essa, está na categoria Gothic >> Medieval.

2. O Arquivo vai vir com .rar ou .zip, então para você usar terá que descompactar. Quando descompactar, você vai ter um símbolo parecido com esse:

3. Agora, entre nesse site e hospede a fonte. Vai aparecer um link de repente, salve no bloco de notas, pois nós vamos precisar dele.

4. Agora, vamos montar nosso @Font-Face. Pegue esse código abaixo e modifique de acordo com a fonte:

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

5. Pra usar, é só colocar o código da fonte em cima do código que você está personalizando.

Fácil, não? Eu já vi muitos tutoriais de @Font-Face, mas eles só falavam que você precisava do link da fonte. Eu fiquei perdidinha tentando descobrir como achar esse link, aí eu hospedei no Tumblr e ficou por isso mesmo.

Pra quem quiser, o @Font-Face da fonte que eu usei de exemplo, a Ithornët:

@font-face {
font-family: 'Ithornët';
src: url('http://static.tumblr.com/ejiu2wy/Lkpmq51zn/ithorn__t.ttf');
}

Podem reblogar a vontade - MAS COM OS CRÉDITOS!

Bjos, lindos!