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 ~ 

10 comentários:

  1. Adorei o tuto Luly ! Já uso aqui no blockquote e nos gadgets !

    ResponderExcluir
    Respostas
    1. Percebi u_u Fui até eu que te falei como antes do tutorial HSAUSHAUSH' Dooshu ^^

      Excluir
  2. Nossa, amei o tutorial, agora vou poder usar minhas fontes!

    Kisus...
    Things Crazy

    ResponderExcluir
  3. Sempre uso. É bem fácil e simples, ótimo tutorial, Luly :3

    ~ APPLES FLYING - Novo post, vai comentar? ((:

    ResponderExcluir
  4. Que tutorial mais fácil esse, Luly-chan <3 Super prático. Obrigada, não sabia disso UHSUSHA'

    Jan Jan Candy || Perfil.

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. É tão boa a sensação de ajudar pessoas u3u Eu que agradeço :33

      Excluir
  5. Que legal, gostei muito do tutorial - é muiito útil

    maiira-t.blogspot.com

    ResponderExcluir

Regras:
• Os comentários são moderados.
• Não xingue nada nem ninguém.
• Comentários como: "Seguindo, segue de volta ?" serão deletados.
• Se for fazer uma crítica faça com educação e bom senso.
• Pedidos feitos por comentário não serão realizados, pedidos só na ask.
• Obrigado por comentar!